详细步骤
- 在Vue项目中运行打包命令:
把前端的配置改成http://localhost:8080 其中如果要同局域网范围,需要把localhost改成本地(eg:192.168.123.1)电脑的ip,8080换成前端调用后端的端口
npm run build
2.将生成的dist
文件夹内容复制到SpringBoot的src/main/resources/static
目录下
your-project/
├── frontend/ # Vue前端项目
└── backend/ # Spring Boot项目
└── src/
└── main/
├── java/
└── resources/
└── static/ # Vue打包文件将放在这里
确保backend/src/main/resources/static
目录下有以下文件
static/
├── css/
├── js/
├── favicon.ico
└── index.html
3.确保SpringBoot的pom.xml中包含
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<executable>true</executable>
</configuration>
</plugin>
</plugins>
</build>
4.在Spring Boot中添加路由重定向接口
【解释】这个接口是用来访问前端的,eg:后端的端口是9090,如果原来请求前端的url为:
http://localhost:8080/#/crew 则后续可以改为http://localhost:9090/#/crew 前端和后端公用一个端口
@Controller
public class FrontendController {
@RequestMapping(value = "/{path:[^\\.]*}")
public String redirect() {
return "forward:/index.html";
}
}
5.使用Maven打包
mvn clean compile -U clean package -D maven.test.skip=true
6.创建启动脚本
Windows批处理文件(start.bat)
@echo off
start javaw -jar your-application.jar
timeout /t 5
start http://localhost:9090/#/crew
exit
访问以下URL验证:
后端的端口为9090
http://localhost:9090 (前端页面)
http://localhost:9090/sysUser/1 (后端API)