方案1: 前后端分离
- 启动Springboot服务
- 配置vue代理(前端项目根目录下的vue.config.js),转发API请求到后端服务
javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: 'http://localhost:2025', // Spring Boot 服务地址
changeOrigin: true, // 支持跨域
// pathRewrite: {
// '^/api': '', // 根据实际需求调整路径重写规则
// },
},
},
},
})
- 启动vue服务
方案2:前后端不分离
- 为Spring配置静态资源路径,指向vue项目的编译结果文件夹
bash
-Dspring.resources.static-locations=classpath:/static/,file:/path/to/static/
- 如果使用的是较新的 Spring Boot 版本(如 2.4+)
bash
spring的默认路径为:
"classpath:/META-INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"
-Dspring.web.resources.static-locations=file:/absolute/path/to/static/dist/
- Spring中配置所有非API请求转发到vue的index页面
java
@Controller
public class IndexController {
/**
* desc @RequestMapping("/{path:[^\\.]*}"):将非 API 的请求路径转发到 index.html。
* 前提是你的 index.html 文件在 src/main/resources/static 或其他静态资源目录下。
* @return :
*/
@RequestMapping("/{path:[^\\.]*}")
public String forwardToIndex() {
return "forward:/index.html";
}
}
- 启动Springboot项目