如何配置Nginx以解决非根目录下SPA静态资源路径失效问题？

本文共计719个文字，预计阅读时间需要3分钟。

必须同时配置 publicPath、router.base 和 Nginx 的 alias 路径，否则资源 404 或刷新白屏是必然结果。只需更改其中一项，资源访问问题即可解决。

Vue CLI / Vite 构建时 publicPath 必须带尾部斜杠

构建产物中 JS/CSS 的引用路径由 publicPath 决定。写成 '/admin'（缺末尾斜杠）会导致浏览器请求 /adminjs/app.abc.js —— 拼接错误，直接 404。

• vue.config.js 中设为：publicPath: '/admin/'（前后都带斜杠）
• Vite 项目在 vite.config.ts 中配置：base: '/admin/'
• 不能用 './' 或 ''，否则刷新时相对路径失效，静态资源加载失败

Vue Router 的 base 值必须与 publicPath 完全一致

前端路由基地址不匹配，会导致页面跳转正常，但刷新时 Vue Router 无法识别当前 URL，返回空白或错误路由。