核心在于让资源路径和路由 base 保持一致，否则刷新页面或访问子路由时会因路径拼接错误导致404或白屏；需统一配置vite.config.ts的base、Vue Router的createWebHistory(base)、Nginx location及index.html fallback路径，确保部署路径（如/admin/）全程严格一致。
核心在于让资源路径和路由 base 保持一致，否则刷新页面或访问子路由时，浏览器会按当前 URL 拼接资源路径，导致 404 或白屏。
一、确认部署路径并统一设置 base
base 是 Vite 控制所有静态资源（JS/CSS/图片/字体）加载起点的唯一配置项。它必须与你实际部署的 URL 路径完全对应。
- 部署在根目录（如 https://example.com/）→ base: '/'
- 部署在子路径（如 https://example.com/admin/）→ base: '/admin/'
- 部署在 GitHub Pages 子项目（如 https://user.github.io/my-app/）→ base: '/my-app/'
- 通过 CDN 加载资源（如 https://cdn.example.com/assets/）→ base: 'https://cdn.example.com/'
配置位置：vite.config.ts（或 .js）中 defineConfig 的顶层字段：
base: '/admin/', // ✅ 与 Nginx location 或 GitHub Pages 仓库名严格一致
// 其他配置...
})
二、避免 public 目录资源与路由路径冲突
Remix 或文件系统路由类项目中，public/images/about.jpg 和 app/routes/about.tsx 同时存在时，访问 /about 会命中路由而非图片——因为服务器优先匹配路由规则。
- 不推荐直接用
/images/about.jpg，易与路由重叠 - 推荐加前缀隔离：把图片放进
public/assets/images/，引用时写/assets/images/about.jpg - 更彻底的做法：在 vite.config 中设 base: '/assets/'，再配合
assetPrefix（部分插件支持），从源头区分资源域和路由域
三、检查构建产物是否生效
别只改配置就结束，一定要验证 dist 目录下的实际输出：
- 打开
dist/index.html，查看<script src>和<link href>的路径是否带上了你设的 base（例如src="/admin/assets/index.js"） - 检查 CSS 文件里
url()引用的字体、背景图等，路径是否也已自动重写 - 若仍为
/assets/xxx，说明 base 未生效——确认是否在 build 阶段读取了正确环境变量，或是否被其他插件覆盖
四、服务端需配合反向代理规则
仅配对 Vite 的 base 还不够。比如 Nginx 把请求代理到 /app/，但后端服务并不知道这个前缀，就会返回 404。
- Nginx 示例（location 必须与 base 值一致）：
location /app/ {
alias /var/www/dist/;
try_files $uri $uri/ /app/index.html;
} - 关键点：
try_files最后一项必须是/app/index.html，不能写成/index.html，否则子路径下路由刷新失败 - 若用 Node.js 服务（如 Express），也要确保静态托管路径和 history fallback 路径带上相同 base 前缀
