Vue 项目路由配置实战：base 属性应用技巧

Vue 项目部署到二级目录（如 `/admin/`）时，仅修改路由路径远远不够，必须同步精准配置 Vue Router 的 `base`、构建工具的资源前缀（`vue.config.js` 中的 `publicPath` 或 Vite 的 `base`）、HTML 的 `` 标签，以及 Nginx 的 `alias` 与 `try_files` 规则——四者路径必须严格一致（如全为 `/admin/`），否则轻则静态资源 404、页面白屏，重则刷新即崩溃；本文手把手拆解各环节关键细节与常见陷阱，帮你一次性打通二级目录部署的全链路配置。

Vue 项目部署到二级目录（比如 https://example.com/admin/）时，仅改路由 path 是不够的，必须让整个前端路径体系对齐：资源加载路径、HTML 中 base 标签、Vue Router 的 base 配置三者一致。否则会出现白屏、404、跳转后刷新 404 等典型问题。

一、Vue Router 必须显式设置 base

Vue Router 的 base 选项是历史模式下所有路由的公共前缀，它直接影响 URL 解析和导航行为。不设或设错，深层路由（如 /admin/dashboard）将无法匹配。

• 使用 Vue Router 3（Vue 2）：在 src/router/index.js 中传入 base: '/admin/'
• 使用 Vue Router 4（Vue 3）：在 createRouter 的 history 参数中指定，例如：createWebHistory('/admin/')
• 推荐按环境区分：开发时用根路径，生产才加二级目录，避免本地调试异常
  base: process.env.NODE_ENV === 'production' ? '/admin/' : '/'

二、vue.config.js 同步配置 publicPath

publicPath 决定构建后所有静态资源（JS/CSS/图片）的引用前缀。它必须与 Router 的 base 完全一致，否则 HTML 加载的 JS 文件地址会变成 /js/app.js，而实际位于 /admin/js/app.js，直接 404。

• 设为带前后斜杠的完整子路径：publicPath: '/admin/'
• 不要写成 './admin/' 或 'admin/'，前者导致相对路径混乱，后者被当作相对路径处理
• 若使用 Vite，对应配置项是 base: '/admin/'（在 vite.config.js 中）

三、index.html 补充 meta base（可选但推荐）

虽然不是强制项，但在 public/index.html 的 中添加：

有助于部分插件、第三方 SDK 或调试工具识别当前上下文路径，尤其在混合部署或多项目共存时更稳妥。

四、Nginx 配置需配合 alias + try_files

前端设好 base 只解决“怎么发请求”，后端要解决“怎么正确响应”。Nginx 必须用 alias（不是 root）指向 dist 目录，并通过 try_files 实现 history fallback：

• location /admin/ { alias /var/www/myapp/dist/; } —— 注意 alias 结尾有斜杠，且路径指向 dist 目录本身
• try_files $uri $uri/ /admin/index.html; —— 所有未命中静态文件的请求，都返回 /admin/index.html，交由前端路由接管
• 切勿使用 root /var/www/myapp/dist;，否则请求 /admin/js/app.js 会被拼成 /var/www/myapp/dist/admin/js/app.js，路径多了一层

以上就是《Vue 项目路由配置实战：base 属性应用技巧》的详细内容，更多关于的资料请关注golang学习网公众号！