try_files 是解决 SPA 路由 404 的核心配置，通过按序匹配 $uri、$uri/，最终 fallback 到 /index.html，使前端路由接管；需避免缺失 $uri/ 或未兜底至 index.html 等常见错误。
在 Nginx 中部署 Vue 或 React 这类前端单页应用（SPA）时，try_files 指令是解决路由 404 问题的核心配置。它让所有非静态资源请求都 fallback 到 index.html，由前端路由接管，而不是由 Nginx 返回 404。
为什么 SPA 需要 try_files？
Vue Router 和 React Router 默认使用 history 模式（非 hash 模式），URL 看起来像 /user/123。但这类路径在服务端并不存在真实文件，Nginx 默认会直接返回 404。而 try_files 可以按顺序检查文件是否存在，并在都不匹配时兜底返回 index.html，让前端 JS 加载后自行解析路由。
基础 try_files 配置（推荐）
以下是最常用、最稳妥的写法：
location / {
root /var/www/my-app;
try_files $uri $uri/ /index.html;
}
-
$uri：先尝试匹配真实文件，如/logo.png、/js/app.js -
$uri/：再尝试匹配目录，如/assets/（末尾带斜杠） -
/index.html：以上都不命中时，返回根目录下的index.html，触发前端路由
避免常见陷阱
有些写法看似简洁，实则有隐患：
- ❌
try_files $uri /index.html;—— 缺少$uri/，会导致访问/static/这类目录时 404（Nginx 不自动补斜杠） - ❌
try_files $uri $uri/ =404;—— 没有兜底到index.html，SPA 路由仍会 404 - ⚠️ 如果构建输出目录不是
/var/www/my-app，请确保root路径与实际dist目录一致；也可用alias，但要注意结尾斜杠和路径拼接逻辑
配合前端构建路径的注意事项
确保你的 Vue 或 React 项目构建配置与 Nginx 一致：
- Vue CLI：检查
vue.config.js中publicPath，生产环境建议设为'/'（或子路径如'/admin/'，此时 Nginx 需配location /admin/并调整root或用alias） - React（CRA）：默认 publicPath 是
'/'；若部署在子路径，需设置homepage字段，并在 Nginx 中对应配置 location 块 - 静态资源（CSS/JS）应能通过
/js/app.xxxx.js正常加载——这是验证$uri分支是否生效的关键信号
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
