new Router base的作用

在 Vue Router 中,base 属性的作用简单来说就是:告诉路由系统,你的整个单页面应用(SPA)是运行在域名的哪个子路径下的。

默认情况下,base 的值是 "/",即:假设你的应用部署在域名的根目录。但针对你现在的情况(部署在 /zilujing/)子路径,这个属性至关重要。

以下是 base 的具体职能:

1. 自动为路径添加前缀

当你设置了 base: '/zilujing/' 后,你在代码里写的任何跳转路径,Vue Router 都会自动帮你加上这个前缀。

如果没有这个 base,路由会尝试跳转到 /login,这会导致直接脱离那个目标域名分配给你的子目录,从而导致 404 或访问到别人的页面。

2. 路由匹配逻辑(剥离前缀)

当用户直接访问 https://xxfsts.../zilujing/dashboard 时,Vue Router 需要知道哪一部分是"基础路径",哪一部分是"业务路径"。

  • 如果没有 base:路由会去寻找路径为 /zilujing/dashboard 的配置。你需要给每个路由定义都手动加上前缀,非常麻烦。

  • 有了 base: '/wlcyzhjgpt/':路由会自动识别并"切掉"这个前缀,然后在你的 routes 列表里寻找匹配 /dashboard 的组件。这让你在开发时,逻辑依然保持简洁。

3. 处理 History 模式

若依默认通常使用 mode: 'history'。在 History 模式下,浏览器通过 HTML5 History API 进行跳转。

  • base 属性会确保当你调用 history.pushState 时,浏览器生成的完整 URL 是包含那个子目录的,否则会导致刷新页面后路径解析错误。

举个通俗的例子

假设你的项目是一间办公室。

  • 如果不设 base (默认 '/'):你认为你的办公室就是整栋大楼(域名)。有人找"财务室",你会直接指向大楼的 1 层。

  • 如果设置 base: '/wlcyzhjgpt/' :你明确知道你的办公室在大楼的"wlcyzhjgpt"这个房间里。有人找"财务室",你会知道那是指"wlcyzhjgpt 房间里的财务室",而不是整栋楼的财务室。


特别提醒:它必须配合 publicPath 使用

base 和 vue.config.js 里的 publicPath 是"双胞胎",必须同步修改:

  1. publicPath (Webpack 配置) :决定了 index.html 引入 JS 和 CSS 的路径(例如:<script src="/wlcyzhjgpt/js/app.js">)。这是为了让资源文件能找对地方。

  2. base (Vue Router 配置) :决定了页面 URL 路径 跳转的基准。这是为了让页面跳转能找对地方。

如果你只改了 publicPath 没改 base:
你会发现页面能打开,图片样式也都有,但是一点击登录或者切换菜单,地址栏的路径就会瞬间跳回根目录(例如跳到了 https://gxfsts.scjdglj.gxzf.gov.cn/login),导致页面空白或 404。

复制代码
1.第一步:修改前端配置 (Vue 侧)
你需要在打包前告诉 Vue 项目,它将运行在 /wlcyzhjgpt/ 这个目录下。
修改 vue.config.js:
找到 publicPath,将其修改为二级目录名。

// vue.config.js
publicPath: process.env.NODE_ENV === "production" ? "/wljg/" : "/",

2.修改 src/router/index.js:
为路由添加 base 属性,确保页面跳转路径正确。
export default new Router({
  base: '/wljg/', // 必须与上面一致
  mode: 'history', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

3.修改 src/utils/request.js (或 .env.production): 一般修改以上两步即可成功了
确保你的 axios 请求前缀能够被 Nginx 正确识别。通常保持 /prod-api 即可,但在通过二级目录访问时,我们要确保请求发往的是 https://domain.com/wlcyzhjgpt/prod-api。
建议在 .env.production 中设置:

VUE_APP_BASE_API = '/wljg-api' # 建议改个名,避免跟根目录冲突
相关推荐
行者全栈架构师2 小时前
【鸿蒙心迹】鸿蒙网络请求架构实战——@ohos.net.http 到 Axios 封装、拦截器与统一错误处理(HarmonyOS 7.x)
前端·算法·架构
全栈Agent 小李2 小时前
【无标题】
前端·后端·agent·ai编程·全栈·cursor·mcp
羲云2 小时前
别让 AI 凭记忆做调研:给 WorkBuddy 接上可核验的实时搜索
前端
只睡四小时2 小时前
AI 生成 PPTX:11 页课件编译出 429 个形状
javascript·python·pptx·ai生成ppt·ooxml
deli0073 小时前
连接池到底配多大?QPS 和 RT 算一遍,再跑 1 万次请求实测超时率
前端
风花一世月3 小时前
🏮 我把三坊七巷做成了能飞的 3D 地图(901 个真实建筑轮廓、20 处景点,在线直接玩)
前端
whi3 小时前
一个小工具,解决了一个困扰 Vue 开发者多年的类型检查难题
vue.js·typescript
特立独行的猫A3 小时前
用仓颉语言写一个串口调试助手:cj-tauri 实战
前端
小凯在掘金3 小时前
Shadow DOM 和 Virtual DOM ?别再傻傻分不清
前端·html
郑州光合科技余经理3 小时前
本地生活平台搭建:跨业态用户标识怎么贯通
java·开发语言·前端·后端·uni-app·php·ai编程