将 vue3 项目打包后部署在 springboot 项目运行

前端vite打包

vite 打包路径配置

打包命令（可选）

执行打包

后端springboot配置

静态资源路径配置（可选）

thymeleaf依赖

转移打包文件

请求返回html文件

启动项目

可能遇到的问题

页面一刷新就404

页面空白

页面没有数据

前端vite打包

vite 打包路径配置

在 vite.config.js（.ts）设置开发或生产环境服务的公共基础路径（base配置项），这里不使用相对路径

// vite.config.ts
export default defineConfig({plugins: [vue()],base:'/', // 设置项目的基础路径resolve:{alias: [{find: '@',replacement: path.resolve(__dirname, 'src')}]},server: {host: '0.0.0.0',proxy: {'/api': {target: 'http://localhost:8080', // 设置代理目标changeOrigin: true,rewrite: (path) => path.replace(/^/api/, '')}}}})

打包命令（可选）

如果是 TS 项目，可以在打包命令后加上 --noEmit，防止打包后生成大量 map 文件。

// package.json
"scripts": {"dev": "vite --open","build": "vue-tsc --noEmit && vite build","preview": "vite preview"}

执行打包

执行 vscode 左下角配置好的 build 脚本

打包后在根目录下可以看到生成的 dist 文件

后端springboot配置

静态资源路径配置（可选）

在 application.yml(.properties) 中配置 Web 静态资源路径，指定为 static

spring:web:resources:static-locations: classpath:/static/

thymeleaf依赖

在 pom.xml 中加入 thymeleaf 模板的依赖并刷新 maven

// pom.xml
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

转移打包文件

将前端打包好的dist文件夹中的内容复制到后端的 resource/static 中，新建 resource/templates 文件夹，将 index.html 放入 templates 中

请求返回html文件

新建一个控制器类，直接访问本地8080端口时返回 index.html。由于项目中有 thymeleaf 模板依赖，“index” 就是 template 中的 index.html

// BasicController.java
@Controller
public class BasicController {// http://127.0.0.1:8080/@RequestMapping("/")public String html(){return "index";}}

如果前端项目的 vue-router 使用的是历史模式（如下图）

历史模式

服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你 app 依赖的页面。

// BasicController.java
@Controller
public class BasicController {// http://127.0.0.1:8080/@RequestMapping("/")public String html(){return "index";}// 捕获所有未匹配路径并重定向到 index.html@GetMapping("/**/{path:[^\.]*}") // 不匹配带"."的路径（如 .js/.css 等静态资源）public String redirect() {return "forward:/";}
}

启动项目

启动 springboot 项目，浏览器地址栏输入http://127.0.0.1:8080回车可以看到前端页面

可能遇到的问题

页面一刷新就404

检查前端的 vue-router 使用历史模式还是哈希模式，历史模式（HTML5 模式）需要后端额外配置，配置参考上文。
不同的历史模式 | Vue Router[这里是图片006]https://router.vuejs.org/zh/guide/essentials/history-mode.html