将 vue3 项目打包后摆设在 springboot 项目运行

目次
前端vite打包
vite 打包路径设置
打包命令（可选）
实行打包
后端springboot设置
静态资源路径设置（可选）
thymeleaf依赖
转移打包文件
请求返回html文件
启动项目
大概遇到的问题
页面一革新就404
页面空白
页面没有数据
前端vite打包

vite 打包路径设置

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

1. // vite.config.ts
2. export default defineConfig({
3.     plugins: [vue()],
4.     base:'/', // 设置项目的基础路径
5.     resolve:{
6.         alias: [
7.             {
8.                 find: '@',
9.                 replacement: path.resolve(__dirname, 'src')
10.             }
11.         ]
12.     },
13.     server: {
14.         host: '0.0.0.0',
15.         proxy: {
16.             '/api': {
17.                 target: 'http://localhost:8080', // 设置代理目标
18.                 changeOrigin: true,
19.                 rewrite: (path) => path.replace(/^/api/, '')
20.             }
21.         }
22.     }
24. })

复制代码

打包命令（可选）

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

1. // package.json
2. "scripts": {
3.     "dev": "vite --open",
4.     "build": "vue-tsc --noEmit && vite build",
5.     "preview": "vite preview"
6.   }

复制代码

实行打包

实行 vscode 左下角设置好的 build 脚本

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

后端springboot设置

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

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

1. spring:
2.         web:
3.             resources:
4.                 static-locations: classpath:/static/

复制代码

thymeleaf依赖

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

1. // pom.xml
2. <dependency>
3.     <groupId>org.springframework.boot</groupId>
4.     <artifactId>spring-boot-starter-thymeleaf</artifactId>
5. </dependency>

复制代码

转移打包文件

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

请求返回html文件

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

1. // BasicController.java
2. @Controller
3. public class BasicController {
4.     // http://127.0.0.1:8080/
5.     @RequestMapping("/")
6.     public String html(){
7.         return "index";
8.     }
10. }

复制代码

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

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

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

复制代码

启动项目

启动 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举行清除。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。