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' # 建议改个名,避免跟根目录冲突
相关推荐
AI大模型-小华38 分钟前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子3 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅3 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni3 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学5 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端
赵庆明老师5 小时前
Vben精讲:21-详解web-antd:tsconfig.json
前端·json·vim
wc885 小时前
微软EDGE浏览器功能学习
前端·学习·edge
破z晓5 小时前
javascript 导出excel表
开发语言·javascript·excel
Csvn6 小时前
🎯 原生 `<dialog>` 元素:终于可以扔掉一半的自定义弹窗组件了?
前端