如何利用 try_files 指令解决前端框架（Vue/React）路由刷新 404 问题-Nginx-PHP中文网

nginx 配置 try_files $uri $uri/ /index.html; 可解决 history 模式下刷新 404 问题：先匹配静态文件，再查目录，最后兜底至 index.html；二级路径需配合 alias 或 root，并注意路径拼接与权限。

如何利用 try_files 指令解决前端框架（vue/react）路由刷新 404 问题

这个问题很常见，根源在于前端路由（history 模式）和服务器静态文件服务逻辑不匹配。浏览器刷新时，Nginx 会把 /user/profile 当成真实路径去磁盘找文件，而实际只有一个 index.html 入口。try_files 就是让 Nginx 主动“兜底”，把所有找不到的请求都交还给前端路由处理。

核心配置：一行指令搞定基础场景

在 Nginx 的 location / 块中加入：

try_files $uri $uri/ /index.html;

它的执行顺序是：

react-best-practices

重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...

下载

先查是否存在与请求 URI 完全匹配的静态文件（比如 /logo.png）→ 有就直接返回
再查是否存在同名目录（比如 /static/）→ 有就尝试索引页
以上都失败 → 统一返回 /index.html，由前端 JS 解析当前 URL 并渲染对应页面

子路径部署：注意 alias 和 root 的区别

如果你的项目部署在二级路径下（例如 https://example.com/admin/），不能只改 try_files，还要配合 alias 或 root：

用 alias（推荐）：
```
location /admin/ {   alias /var/www/admin-dist/;   try_files $uri $uri/ /admin/index.html; }
```
注意：alias 后路径末尾要加 /，且 try_files 中的兜底路径要写成 /admin/index.html
用 root：
```
location /admin/ {   root /var/www;   try_files $uri $uri/ /admin/index.html; }
```
此时 Nginx 会拼出 /var/www/admin/index.html，所以物理路径必须存在该结构

避免踩坑：几个关键细节

很多 404 问题其实不是 try_files 写错了，而是配套设置没跟上：

确保 index index.html; 已声明 —— 否则即使返回 /index.html，Nginx 也可能因找不到默认索引而报错
检查 root 或 alias 路径是否指向构建输出目录（如 dist 或 build），权限是否可读
不要在 location / 外写重复的 root —— 容易被覆盖导致路径解析错误
静态资源（js/css/img）要能正常加载 —— 如果连 /static/js/app.abc123.js 都 404，说明 $uri 分支没生效，先排查文件路径和权限