将 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 静态资源路径指定为 staticspring: web: resources: static-locations: classpath:/static/thymeleaf依赖在 pom.xml 中加入 thymeleaf 模板的依赖并刷新 maven// pom.xml dependency groupIdorg.springframework.boot/groupId artifactIdspring-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页面空白可能是 js 和 css 文件没有引入成功查看 f12 网络检查 index.html 查看 script 和 link 标签的地址应该是绝对路径不含./页面没有数据查看 f12 网络检查请求路径有没有错误是否存在跨域问题。检查后端有没有配置请求拦截器或者spring security进行排除。