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

前端vite打包

[vite 打包路径配置](#vite 打包路径配置)

打包命令（可选）

执行打包

前端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

页面空白

可能是 js 和 css 文件没有引入成功，查看 f12 网络

检查 index.html ，查看 script 和 link 标签的地址，应该是绝对路径（不含./）

页面没有数据

查看 f12 网络，检查请求路径有没有错误，是否存在跨域问题。检查后端有没有配置请求拦截器或者spring security进行排除。