nginx 需配置 try_files 实现 spa 路由 fallback：location / { root /dist; try_files $uri $uri/ /index.html; }，确保刷新或直接访问子路径不 404；带 base 路径时用 alias 并调整 fallback 路径。
前端项目打包部署后，Nginx 需要正确处理路由（尤其是 SPA 单页应用），否则刷新页面或直接访问子路径会返回 404。这不是“重写 URL 给后端”，而是让所有非静态资源请求都 fallback 到 index.html，由前端路由接管——这是核心目标。
用 try_files 实现最稳妥的 SPA 路由支持
这是官方推荐、最简洁、性能最好的方式，适用于 Vue、React、Angular 等打包后的静态站点。
location / {
root /path/to/your/dist; # 指向 build 输出目录
try_files $uri $uri/ /index.html;
}
-
$uri：先尝试匹配真实文件（如/js/app.js、/logo.png） -
$uri/：再尝试匹配同名目录（如/admin/） -
/index.html：全部不命中时，内部重定向到入口文件，不改变浏览器地址栏，也不发新请求
⚠️ 注意：/index.html 是相对于 root 的路径，不是绝对 URL；不要加 http://，否则变成外部重定向。
rewrite 方案（仅在特定路径下需要时才用）
比如你希望把 /app/xxx 全部映射到 /xxx，且仍走前端逻辑：
location /app/ {
rewrite ^/app/(.*)$ /$1 break;
root /path/to/your/dist;
try_files $uri $uri/ /index.html;
}
-
rewrite ^/app/(.*)$ /$1 break;：把/app/前缀去掉，重写后仍在当前 location 内继续处理 -
break：防止后续 location 重复匹配，也避免循环重写（Nginx 限制最多 10 次 rewrite，超限报 500）
避免常见错误
- ❌ 不要用
rewrite ^/(.*)$ /index.html last;
这会导致无限循环（/index.html又被匹配，再次 rewrite） - ❌ 不要在
location /里写proxy_pass+rewrite混用，除非明确代理后端 API
前端静态资源不需要代理，只用root+try_files - ❌ 不要漏掉
root或alias配置，否则文件找不到，try_files无效 - ✅ 静态资源（js/css/img）必须能被 Nginx 直接读取，检查
root路径和文件权限
处理带 base 路径的前端项目（如 Vue Router history 模式设了 base: '/myapp/'）
location /myapp/ {
alias /path/to/your/dist/;
try_files $uri $uri/ /myapp/index.html;
}
- 用
alias（不是root）：alias会替换整个匹配路径，/myapp/js/app.js→ 映射到/path/to/your/dist/js/app.js -
try_files的 fallback 要写成/myapp/index.html，因为浏览器请求的是/myapp/xxx
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
