核心是配置location / { try_files $uri $uri/ /index.html; }，先匹配静态文件和目录，最后兜底至/index.html交由前端路由接管；需单独配置location /api/等避免api被误捕获，并适配子路径部署。
在 Nginx 的 server 块中用 try_files 实现单页应用（SPA）路由，核心是让所有前端路由（如 /user/profile）都 fallback 到 index.html，由前端路由库（如 React Router、Vue Router）接管渲染，而不是返回 404。
基础配置：覆盖所有非资源请求
SPA 静态文件通常放在根目录（如 /usr/share/nginx/html），其中 index.html 是入口。但默认情况下，Nginx 对 /about 这类路径会尝试查找对应文件或目录，找不到就报 404。解决方法是用 try_files 把“找不到的请求”兜底到 index.html，同时排除真实存在的静态资源（JS/CSS/图片等）。
典型写法：
location / {
try_files $uri $uri/ /index.html;
}
含义：
– 先检查请求路径是否对应真实文件（$uri），如 /logo.png → 直接返回；
– 再检查是否为真实目录（$uri/），如 /assets/ → 返回目录索引或 403；
– 都不匹配时，内部重写为 /index.html（不跳转、不改变 URL），交由前端路由处理。
避免资源请求被错误兜底
上面的写法在多数场景可行，但存在隐患：如果 index.html 中引用了 /api/user，而该路径恰好不存在静态文件，也会被 fallback 到 index.html，导致 API 请求返回 HTML 内容，前端解析失败。
正确做法是把 API 请求（或其他后端接口）单独剥离，例如：
- 约定所有 API 以
/api/开头 → 单独配location /api/代理到后端； - 静态资源（
.js、.css、.png等）确保真实存在，Nginx 自然能命中$uri； - 对已知不存在的路径（如
/favicon.ico），可显式返回 204 或 404，避免干扰。
增强版示例：
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend;
proxy_set_header Host $host;
}
location = /favicon.ico {
log_not_found off;
return 204;
}
配合前端路由模式的关键细节
该方案仅适用于前端使用 HTML5 History 模式（非 Hash 模式）。因为 Hash 模式（如 #/user）的路径片段不发送给服务器，Nginx 完全无需干预。
若用 History 模式，还需确保：
– 前端构建时设置正确的 publicPath（如 / 或子路径）；
– 若部署在子路径（如 https://example.com/app/），location 和 try_files 需适配前缀：
location /app/ {
alias /usr/share/nginx/html/;
try_files $uri $uri/ /app/index.html;
}
注意：alias 后路径末尾需带 /，且 try_files 中的 fallback 路径（/app/index.html）要与 alias 解析逻辑一致。
调试与验证技巧
配置后建议验证以下几点：
– 直接访问 https://your-domain.com/ → 正常加载首页；
– 刷新页面访问 https://your-domain.com/about → 仍显示 SPA 页面，URL 不变，控制台无 404；
– 访问真实静态资源（如 /static/main.abc123.js）→ 返回 JS 文件，状态码 200；
– 访问 API（如 /api/data）→ 返回后端响应，不是 HTML；
– 查看 Nginx 错误日志（/var/log/nginx/error.log）确认无 “open() failed” 类警告。
若刷新路由出现 404，常见原因是：
– try_files 顺序错误（漏掉 $uri/ 或 fallback 路径写错）；
– root 或 alias 路径配置不匹配实际文件位置；
– 前端未启用 History 模式或 base 配置不一致。
