Vue + Spring Boot 项目统一添加 `/wvp` 访问前缀实践

文章目录

一、改造目标
二、前端改造
[三、后端改造（Spring Boot + Spring Security）](#三、后端改造（Spring Boot + Spring Security）)
四、是否还需要检查其他地方？
五、修改完成后的访问方式
六、修改完成后的操作清单
七、总结

在实际部署或多项目共存的场景中，经常需要为前端项目添加统一的访问前缀，例如将原本的访问地址：

复制代码

http://localhost:9528/#/dashboard

改为：

复制代码

http://localhost:9528/wvp/#/dashboard

一、改造目标

所有前端资源统一以 /wvp/ 作为访问前缀
Vue 路由自动适配 /wvp
Spring Boot 后端允许 /wvp/** 的访问
不影响现有路由跳转逻辑
开发环境与生产环境行为一致

二、前端改造

1️⃣ 修改 vue.config.js

文件路径：

复制代码

web/vue.config.js

将 publicPath 从 / 改为 /wvp/：

js 复制代码

module.exports = {
  publicPath: '/wvp/',
  devServer: {
    port: 9528
  }
}

作用说明

所有静态资源（JS、CSS、图片）都会自动加上 /wvp/ 前缀
这是前端能正常加载资源的关键配置
如果漏掉这一步，页面会白屏或 404

2️⃣ 修改 Vue Router 配置

文件路径：

复制代码

web/src/router/index.js

在创建路由实例时，增加 base 配置：

js 复制代码

const router = new VueRouter({
  base: '/wvp/',
  routes
})

作用说明

Vue Router 会自动在所有路由前拼接 /wvp/
/#/dashboard → /wvp/#/dashboard
代码中已有的路由无需修改

3️⃣ 路由跳转是否需要修改？

不需要。

例如以下代码：

js 复制代码

this.$router.push('/dashboard')

在设置了：

js 复制代码

base: '/wvp/'

之后，Vue Router 会自动处理为：

复制代码

/wvp/#/dashboard

✅ 相对路径写法是推荐做法

❌ 不建议在代码中写死 /wvp/dashboard

三、后端改造（Spring Boot + Spring Security）

如果后端启用了 Spring Security，需要同步放行 /wvp/** 路径。

1️⃣ 修改 Security 配置

文件路径：

复制代码

src/main/java/com/genersoft/iot/vmp/conf/security/WebSecurityConfig.java

在 antMatchers 中添加 /wvp/**：

java 复制代码

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
        .antMatchers(
            "/wvp/**",
            "/swagger-ui/**",
            "/v3/api-docs/**"
        ).permitAll()
        .anyRequest().authenticated();
}

作用说明

防止前端页面或静态资源被 Spring Security 拦截
如果不加，会出现 页面 403 / 无法加载

四、是否还需要检查其他地方？

需要重点检查以下内容

是否存在硬编码路径
- window.location.href = '/dashboard'
- <a href="/login">
👉 建议改为使用 Vue Router 或相对路径
接口地址
- 如果接口是相对路径（如 /api/xxx），通常不需要修改
- 如果是完整路径，需确认是否受 /wvp 影响
devServer 配置
- 一般无需额外修改
- 只要 publicPath 和 router.base 正确即可

五、修改完成后的访问方式

修改前

复制代码

http://localhost:9528/#/dashboard

修改后

复制代码

http://localhost:9528/wvp/#/dashboard

六、修改完成后的操作清单

修改完成后，请务必执行以下步骤：

重新启动前端开发服务器
bash 复制代码
```
npm run serve
```
如果是生产环境
bash 复制代码
```
npm run build
```
重启后端 Spring Boot 服务

七、总结

通过以下三步，即可为 Vue + Spring Boot 项目优雅地添加统一前缀：

前端：
- vue.config.js → publicPath
- router/index.js → base
后端：
- Spring Security 放行 /wvp/**
代码层面：
- 保持路由跳转使用相对路径

这种方式 侵入性低、可维护性好，非常适合多项目部署、反向代理或统一网关场景。