前端 base 必须与 nginx location 前缀严格一致且首尾带斜杠,如部署在 /admin/ 则设为 "/admin/";否则资源 404 或刷新白屏;vue router、react router、vite、cra 及构建配置(publicpath/base)均需同步该值。

前端的 base(Vue Router 的 base 或 React Router 的 basename)必须和 Nginx 中 location 的 URL 前缀完全一致,且首尾都带斜杠,比如部署在 /admin/ 下,就设为 "/admin/" —— 少一个斜杠、多一个字符、用点号或空字符串,都会导致资源加载失败或刷新白屏。
base 必须与 location 路径严格对齐
Vue Router 初始化时:
-
base: '/admin/'✅ 正确:匹配 Nginx 的location /admin/ { ... } -
base: '/admin'❌ 错误:缺末尾斜杠,CSS/JS 引用变成/adminjs/app.js,404 -
base: './'❌ 错误:相对路径,刷新时无法解析,静态资源失效 -
base: process.env.BASE_URL⚠️ 风险:仅当环境变量值也精确等于"/admin/"才安全
React Router v6+ 同理,basename 要和 homepage 一致
Vite 或 CRA 项目中:
- Vite:
base: '/admin/'(vite.config.ts) - CRA:
"homepage": "/admin/"(package.json),构建后自动注入basename - Router 组件必须显式传入:
<browserrouter basename="/admin/"></browserrouter>
多个子应用各自独立设 base
每个子路径对应一个独立的 SPA,不能共用 base:
-
/shop/→ Vue:base: '/shop/',Nginx:location /shop/ { alias /var/www/shop/dist/; ... } -
/user/→ React:basename="/user/",Nginx:location /user/ { alias /var/www/user/dist/; ... } - 不同应用的 base 互不影响,但必须一一对应,不能交叉或省略
别忘了 publicPath / base 构建配置也要同步
它决定 JS/CSS 等资源的引用前缀,必须和 base 完全一致:
- Vue CLI:
publicPath: '/admin/'(vue.config.js) - Vite:
base: '/admin/'(vite.config.ts) - 打包产物中的
<script src="/admin/js/app.xxx.js"></script>才能被 Nginx 正确映射到文件系统











