将 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进行排除。

相关推荐
AndrewPerfect1 小时前
关于跨域问题(本地前端访问服务器端接口跨域出错)
前端·后端
钢板兽1 小时前
力扣hot100二刷——动态规划
java·算法·leetcode·动态规划
demonlg01121 小时前
Go 语言标准库中encoding/json模块详细功能介绍与示例
开发语言·后端·云原生·golang·json
程序猿chen2 小时前
云原生四重涅槃·破镜篇:混沌工程证道心,九阳真火锻金身
java·开发语言·git·后端·python·程序人生·云原生
zzj_2626103 小时前
Java课程设计(双人对战游戏)持续更新......
java·游戏·课程设计
kill bert3 小时前
第30周Java分布式入门 分布式基础
java·开发语言·分布式
专业系统开发老赵4 小时前
[特殊字符]《多商户家政系统技术解析:SpringBoot+MyBatisPlus+UniApp高效实战指南》
spring boot·后端·uni-app
余华余华4 小时前
计算机等级考试数据库三级(笔记2)
java·服务器·数据库
星星重行行4 小时前
git:远程仓库拉取到本地,fork到本地,修改后再上传
java·git
爱的叹息4 小时前
Spring 及 Spring Boot 条件化注解(15个)完整列表及示例
spring boot·python·spring