Vue3 + Vite 打包整合到Spring boot项目

概述

Vue3 + Vite 打包整合到Spring boot项目，两种模式。单一项目和多重项目

单一项目：

vue 单一项目整合到一个Spring Boot 项目

多重项目

vue多个项目整合到一个Spring Boot项目。或者说指定特殊前缀路径整合到spring boot 项目。

axios 里面的基础前缀

baseURL: import.meta.env.VITE_APP_API_URL,

 

环境配置文件

• .env.development (开发)

• .env.production （生产）

.env.development (开发)配置

# 接口地址
VITE_APP_API_URL = http://192.168.31.66:3000/

.env.production (生产)配置

# 接口地址
VITE_APP_API_URL = /

注意：生产改为 / 即可，配合下方的 vite.config.ts base 组合使用得到效果

单一项目整合

Vue项目配置

Vue 项目配置重点，这里项目为Vue3 + Vite + ts 环境。

找到配置文件vite.config.ts 编辑base部分，设置为："./"

base 配置项目说明

用于指定项目的基础路径，通常用于将项目部署到子路径的情况。

开发或生产环境服务的公共基础路径：

默认'/'   

• 1、绝对 URL 路径前缀名： /xqlee/；  
• 2、完整的 URL： https://xqlee.com/； 
• 3、空字符串或 ./（用于开发环境/集成相对路径）

整合到spring boot项目中，代理的URL地址是没用的。base才是重点。这配置为相对，则所有css /js等都是相对于dist 复制出去的目录。

Spring Boot 项目配置

查看application.yml配置，默认情况静态文件有个static目录，将vue 项目打包的dist目录里面的所有内容复制到static目录即可。

注意单一项目只能复制到静态文件根目录，否则接口对不上地址。

多个项目/指定前缀整合

前缀路径设定 ： /admin/

Vue项目配置

Vue 项目配置重点，这里项目为Vue3 + Vite + ts 环境。

找到配置文件vite.config.ts 编辑base部分，设置为："/admin/"

base 配置项目说明

用于指定项目的基础路径，通常用于将项目 部署到子路径 的情况。

开发或生产环境服务的公共基础路径：

默认'/'   

• 1、绝对 URL 路径前缀名： /xqlee/；  
• 2、完整的 URL： https://xqlee.com/； 
• 3、空字符串或 ./（用于开发环境/集成相对路径）

Spring Boot 项目配置

查看application.yml配置，默认情况静态文件有个static目录，将vue 项目打包的dist目录里面的所有内容复制到static/admin目录即可（这里是因为指定了/admin/前缀）。

下一步创建你前缀的目录 如这里需要在 static目录下创建 admin目录然后将vue项目打包后的dist内容全部复制到admin目录

这样访问页面只需要访问：http://ip:端口/admin/index.html

相对的，接口路径会自动去掉/admin/这个前缀与原本开放的接口地址一致。

提示：spring  boot 的接口地址为@PostMapping("/api/admin/current/user/getDetail")

spring boot vue3 spring boot vue3 vite

http://blog.xqlee.com/article/2412091222562469.html