需用 try_files 解决 SPA 前端路由 404 问题：Nginx 默认找不到 /user/profile 等虚拟路径的真实文件会返回 404，而 try_files 按 $uri、$uri/、/index.html 顺序回退，使前端路由接管。
使用 Nginx 的 try_files 指令配合 location 块，是解决单页应用（SPA）前端路由 404 问题的标准做法。
为什么需要 try_files？
Vue、React、Angular 等 SPA 应用依赖前端路由（如 /user/profile），但这些路径在服务端并不存在真实文件。用户直接访问或刷新该 URL 时，Nginx 默认会查找对应路径的静态文件或目录，找不到就返回 404。而 try_files 可以按顺序尝试多个资源，最终回退到 index.html，让前端路由接管。
基础配置写法
适用于构建后部署在根路径（如 https://example.com/）的项目：
location / {
root /var/www/my-app;
try_files $uri $uri/ /index.html;
}
立即学习“前端免费学习笔记（深入）”；
说明：
– $uri：匹配请求路径对应的真实文件（如 /js/app.js）；
– $uri/：匹配同名目录（如 /assets/）；
– /index.html：兜底项，所有不匹配静态资源的请求都返回它，交由前端路由处理。
避免资源重定向或 404 的细节
- 确保
root或alias设置正确，且index.html确实存在于该路径下 - 不要把
try_files放在location ~ \.html$这类正则 location 中——它会被优先匹配，导致兜底失效 - 若项目部署在子路径（如
/admin/），需配合前端base配置，并用alias+ 末尾斜杠写法，例如：
location /admin/ {
alias /var/www/admin/;
try_files $uri $uri/ /admin/index.html;
}
补充：静态资源缓存与 try_files 兼容
可以同时启用缓存策略，不影响 try_files 行为：
location / {
root /var/www/my-app;
try_files $uri $uri/ /index.html;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
注意：静态资源 location 必须写在通用 location / 之后，或使用更精确的匹配，否则可能绕过 try_files。
