Nginx 中用 try_files 处理前端路由刷新 404 的核心是让非静态资源请求 fallback 到 index.html：配置 location / { try_files $uri $uri/ /index.html; }，并排除 API（location ^~ /api/）和静态资源（location ^~ /static/）以避免误兜底。
在 Nginx 中用 try_files 处理前端路由（如 Vue Router、React Router 的 history 模式）刷新 404，核心是让所有非静态资源请求都 fallback 到 index.html，由前端路由接管。
理解问题根源
单页应用（SPA）使用 HTML5 History API 时，URL 是前端控制的（如 /user/123），但服务器并不真正存在这个路径。用户直接访问或刷新该 URL，Nginx 默认按文件系统查找，找不到就返回 404。
解决思路：只要请求的不是真实存在的静态文件（JS/CSS/图片等），就统一返回 index.html，让前端 JS 加载并解析路由。
基础 try_files 配置
在 server 或 location 块中配置：
location / {
try_files $uri $uri/ /index.html;
}含义逐级匹配：
-
$uri：检查请求路径是否对应真实文件（如/js/app.js） -
$uri/：检查是否为真实目录（如/assets/） -
/index.html：都不匹配时，内部重写为根目录的index.html（不跳转、不改变 URL）
避免干扰静态资源和 API
上面的配置可能把 API 请求（如 /api/users）也 fallback 到 index.html，需排除：
location / {
try_files $uri $uri/ /index.html;
}
<h1>显式处理 API，转发给后端</h1><p>location ^~ /api/ {
proxy_pass <a href="https://www.php.cn/link/65b5b8d1f89bf53a5713bc3afdd83e9e">https://www.php.cn/link/65b5b8d1f89bf53a5713bc3afdd83e9e</a>;
proxy_set_header Host $host;
}</p><h1>可选：显式声明静态资源目录，提升优先级和缓存</h1><p>location ^~ /static/ {
root /var/www/myapp;
expires 1y;
add_header Cache-Control "public, immutable";
}</p>注意：^~ 前缀确保 API 和静态路径优先于 location / 匹配，避免被 try_files 错误兜底。
补充建议
- 确保
index.html在 root 目录下，且 Nginx 有读取权限 - 开发环境用 webpack-dev-server 或 Vite 自带的 history fallback，无需 Nginx 配置
- 若用子路径部署（如
/myapp/），需在前端配置base: "/myapp/"，Nginx 中try_files不变，但 root 或 alias 要对应 - 可加日志验证 fallback 行为：
log_not_found off;避免大量 404 日志干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
