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

目录

前端vite打包

[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

页面空白

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

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

页面没有数据

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

相关推荐
Asthenia0412几秒前
为什么MySQL关联查询要“小表驱动大表”?深入解析与模拟面试复盘
后端
南雨北斗3 分钟前
分布式系统中如何保证数据一致性
后端
Asthenia04127 分钟前
Feign结构与请求链路详解及面试重点解析
后端
WuWuII7 分钟前
gateway
java·gateway
左灯右行的爱情10 分钟前
缓存并发更新的挑战
jvm·数据库·redis·后端·缓存
浩宇软件开发14 分钟前
Android开发,实现一个简约又好看的登录页
android·java·android studio·android开发
brzhang14 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
shepherd11115 分钟前
Kafka生产环境实战经验深度总结,让你少走弯路
后端·面试·kafka
南客先生20 分钟前
多级缓存架构设计与实践经验
java·面试·多级缓存·缓存架构
anqi2723 分钟前
如何在 IntelliJ IDEA 中编写 Speak 程序
java·大数据·开发语言·spark·intellij-idea