核心是用try_files $uri $uri/ /index.html;兜底非静态资源请求，使前端路由接管渲染；需单独配置location /api/代理api，子路径部署时调整try_files和前端base。
在 Nginx 中实现单页应用（SPA）的 URL 重写，核心是让所有前端路由请求都 fallback 到 index.html，由前端路由（如 Vue Router、React Router）接管渲染，而不是让 Nginx 返回 404。
使用 try_files 指令兜底
这是最常用、最推荐的方式。Nginx 会按顺序检查文件是否存在，若静态资源（如 JS、CSS、图片）匹配则直接返回；否则一律返回 /index.html，交由前端路由处理。
配置示例如下：
location / {
try_files $uri $uri/ /index.html;
}
-
$uri：匹配精确路径，如/app.js、/logo.png -
$uri/：尝试作为目录访问（触发 index 文件或 403/404） -
/index.html：兜底项，所有未命中静态资源的请求都返回它（注意开头的/表示根路径）
避免 rewrite 循环和误伤 API
不要对所有请求无差别 rewrite 到 /index.html，尤其要排除真实后端接口，否则 API 请求也会被前端页面拦截。
- 若 API 在
/api/路径下，应单独配置代理：
location /api/ {
proxy_pass http://backend;
proxy_set_header Host $host;
}
- 若使用
rewrite指令（不推荐），必须加break或last控制流程，并确保条件精准，否则易引发重定向循环或覆盖静态资源规则
配合前端路由的 history 模式
该方案仅适用于前端使用 history.pushState 的路由模式（即无 # 的 URL）。若用 hash 模式（如 /#/user），则无需 Nginx 特殊配置，因为 hash 不参与 HTTP 请求。
- 确认前端已启用 history 模式（Vue Router 设置
mode: 'history'，React Router 使用<browserrouter></browserrouter>） - 构建产物中
index.html必须部署在 Nginx 配置的 root 目录下 - HTML 中的资源引用建议用相对路径或 public 目录，避免因子路径导致 JS/CSS 404
可选：支持子路径部署（base URL）
若 SPA 部署在非根路径（如 https://example.com/myapp/），需同步调整：
- Nginx location 改为
location /myapp/ { ... }，并把try_files改为try_files $uri $uri/ /myapp/index.html; - 前端构建时设置
publicPath: '/myapp/'（Vue CLI）或basename="/myapp"（React Router） - 确保
index.html中的<base href="/myapp/">存在（若启用 base 标签）
