Nginx Try_files配置解决单页应用404问题

单页应用部署到Nginx后History路由404的根本原因是Nginx按真实路径查找资源，需用try_files将未匹配请求兜底至/index.html；配置location / { try_files $uri $uri/ /index.html; }可解决，其中$uri查文件、$uri/查目录、/index.html为前端路由fallback入口。

单页应用（SPA）如 Vue、React 项目部署到 Nginx 后，前端路由使用 History 模式时，直接访问子路径（如 /user/profile）或刷新页面会返回 404，根本原因是 Nginx 默认按真实文件路径查找资源，而 SPA 的所有路由都应由前端 index.html 统一接管。

核心原理：用 try_files 把请求兜底到 index.html

try_files 指令按顺序检查文件或路径是否存在，一旦匹配就返回对应资源；全部不匹配时，将请求内部重写（非跳转）到指定 URI。对 SPA，关键是让所有“找不到的路径”都 fallback 到 /index.html，由前端路由接管渲染。

典型配置如下：

location / {
    try_files $uri $uri/ /index.html;
}

为什么这样写？逐段解释

$uri：检查请求路径是否对应真实静态文件（如 /js/app.js、/logo.png），存在则直接返回。

$uri/：检查是否为真实目录（如 /assets/），存在则尝试加载该目录下的索引页（需配合 index index.html;）。

/index.html：前面都不匹配时，内部重写请求到根目录的 index.html，前端 JS 加载后解析当前 URL 并渲染对应视图。

常见坑与增强配置

• 确保 index.html 在 root 目录下，且 root 路径配置正确（如 root /var/www/my-spa;）
• 如果 SPA 部署在子路径（如 https://example.com/admin/），需调整 location 和 try_files：
  

  location /admin/ {
      alias /var/www/my-spa/;
      try_files $uri $uri/ /admin/index.html;
  }

• 避免死循环：不要写成 try_files $uri /index.html;（缺少 $uri/），否则访问 /api/ 这类后端代理路径可能被错误兜底（应单独配 location /api/ 代理）
• 建议显式关闭目录浏览：autoindex off;，防止意外暴露文件结构

验证是否生效

重启 Nginx 后，手动请求一个不存在的前端路由路径（如 /about），响应状态码应为 200，且 HTML 内容是 index.html 的源码；同时检查浏览器控制台无 404 加载 JS/CSS 错误（说明静态资源路径也配置正确）。