Nginx 配置 try_files $uri $uri/ /index.html; 可解决 history 模式下刷新 404 问题：先匹配静态文件，再查目录，最后兜底至 index.html；二级路径需配合 alias 或 root，并注意路径拼接与权限。
这个问题很常见，根源在于前端路由（history 模式）和服务器静态文件服务逻辑不匹配。浏览器刷新时，Nginx 会把 /user/profile 当成真实路径去磁盘找文件，而实际只有一个 index.html 入口。try_files 就是让 Nginx 主动“兜底”，把所有找不到的请求都交还给前端路由处理。
核心配置：一行指令搞定基础场景
在 Nginx 的 location / 块中加入：
try_files $uri $uri/ /index.html;
它的执行顺序是：
- 先查是否存在与请求 URI 完全匹配的静态文件（比如
/logo.png）→ 有就直接返回 - 再查是否存在同名目录（比如
/static/）→ 有就尝试索引页 - 以上都失败 → 统一返回
/index.html，由前端 JS 解析当前 URL 并渲染对应页面
子路径部署：注意 alias 和 root 的区别
如果你的项目部署在二级路径下（例如 https://example.com/admin/），不能只改 try_files，还要配合 alias 或 root：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 用
alias（推荐）：location /admin/ {<br> alias /var/www/admin-dist/;<br> try_files $uri $uri/ /admin/index.html;<br>}
注意：alias后路径末尾要加/，且try_files中的兜底路径要写成/admin/index.html - 用
root：location /admin/ {<br> root /var/www;<br> try_files $uri $uri/ /admin/index.html;<br>}
此时 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分支没生效，先排查文件路径和权限
补充说明：为什么不用 @named location？
有些旧方案用 try_files ... @router + location @router { rewrite ... }，逻辑等价但多了一层跳转。现代 Nginx（1.9.1+）直接支持 /index.html 作为 fallback，更简洁、性能略优，也更少出错。
