刷新页面404是因为Nginx按URL路径查找静态资源，而SPA的前端路由路径无对应文件；try_files通过$uri、$uri/、/index.html顺序fallback，将未命中请求内部重定向至/index.html，实现前端路由兜底。
为什么刷新页面会 404
单页应用（SPA）用 history.pushState 跳转时，URL 变化但没发新请求；Nginx 不知道该返回哪个文件，直接按路径找静态资源——比如访问 /user/profile，它就去查 ./user/profile 这个文件或目录，当然 404。
Try-Files 的核心作用不是“重写”，而是“fallback”
try_files 本身不改 URL，它只是按顺序检查文件/目录是否存在，都不存在时才把请求交给最后一个参数指定的 URI 处理（通常是 /index.html）。这正是 SPA 前端路由需要的兜底逻辑。
- 必须把
try_files放在location /或匹配所有前端路由的location块里，不能只放在location ~ \.js$这类精确匹配中 - 最后一项必须是
/index.html（带前导斜杠），否则 Nginx 会当成外部重定向，触发 302，破坏 history 路由状态 - 如果用了
root指令，确保路径拼接后能正确定位到index.html；用alias时要特别小心末尾斜杠，alias /var/www/app/;和alias /var/www/app;行为不同
一个安全可用的最小配置示例
假设构建产物放在 /var/www/myapp，且前端路由完全由 React Router / Vue Router 管理：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
server {
listen 80;
server_name example.com;
root /var/www/myapp;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~ ^/(api|auth)/ {
proxy_pass http://backend;
proxy_set_header Host $host;
}
}
注意：$uri 匹配精确文件（如 /logo.png），$uri/ 匹配目录（如 /static/），最后的 /index.html 是 fallback。API 请求被 location ~ ^/(api|auth)/ 提前捕获，不会落到 try_files 里。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的两个细节
一是 try_files 末尾的 /index.html 会触发内部子请求（internal redirect），Nginx 会重新匹配 location —— 所以你得确保这个新请求仍能命中同一个 location / 块，否则可能进错分支；二是如果项目用了 base（比如 Vue 的 base: '/admin/'），Nginx 配置里 root 对应的物理路径必须和 base 一致，或者用 rewrite ^/admin(/.*)?$ /$1 break; 配合 try_files，但 rewrite 容易绕过 cache，优先用 root + base 对齐的方式。
