Vue SPA部署到非根目录需publicPath、Vue Router base和Nginx location三者严格对齐：publicPath设为'/admin/'，router base设为'/admin/'，Nginx用alias指向dist目录并配置try_files fallback至/admin/index.html。
要让 Vue 或其他 SPA 正确运行在非根目录（比如 /admin/ 或 /project/）下，关键不是只改 Nginx，而是publicPath、Vue Router base 和 Nginx location 三者必须严格对齐。漏掉任意一环，就会出现 JS/CSS 加载 404、路由跳转白屏或刷新 404 的问题。
确保 vue.config.js 中 publicPath 与部署路径一致
构建时静态资源的引用前缀必须匹配实际访问路径：
- 如果项目将部署在 https://example.com/admin/，则 publicPath 必须设为 '/admin/'（注意结尾斜杠）
- 不要用相对路径
'./'—— 它在子目录下会退回到当前 URL 目录，导致资源请求错位 - 推荐统一用环境变量管理：
publicPath: process.env.VUE_APP_BASE_PATH || '/'，构建时传入VUE_APP_BASE_PATH=/admin/
同步配置 Vue Router 的 base
Router 的 base 是前端路由解析的起点，必须和 publicPath 的路径前缀完全一致：
- 对应
publicPath: '/admin/'，Router 初始化时写：new VueRouter({ base: '/admin/', routes: [...] }) - base 缺失或值不匹配，会导致
this.$router.push('/user')实际跳转成https://example.com/user（而非/admin/user），直接跳出应用 - 开发环境也建议保持一致，避免上线才发现路由失效
Nginx location 配置需区分 alias 与 root，并正确 fallback
这是最容易出错的一环。重点看三个细节：
- 使用 alias 时，location 路径会被“替换”——
location /admin/ { alias /var/www/dist/; }表示请求/admin/js/app.js会映射到文件/var/www/dist/js/app.js - 使用 root 时，location 路径是“拼接”进来的——
location /admin/ { root /var/www; }表示请求/admin/js/app.js会去找/var/www/admin/js/app.js（错误！） - SPA 的 fallback 必须指向带前缀的 index.html：
try_files $uri $uri/ /admin/index.html;（不能写成/index.html）
完整可运行的 Nginx 示例（部署在 /admin/）
假设 dist 文件放在 /var/www/my-spa-dist/，且已按上述设置好 publicPath 和 router base：
location /admin/ {alias /var/www/my-spa-dist/;index index.html;try_files $uri $uri/ /admin/index.html;}
注意：alias 后路径末尾有无斜杠影响实际映射，推荐统一加斜杠；同时确保该目录下真实存在 index.html 和 js/、css/ 等子目录。
