核心是配置location / { try_files $uri $uri/ /index.html; }，优先匹配静态文件和目录，失败则回退至index.html由前端路由接管；需前置声明/api/代理和静态资源路径，避免误兜底，并确保base路径与Nginx location一致。
在 Nginx 中，用 server 块配合 try_files 实现 SPA（单页应用）路由，核心是让所有前端路由请求都回退到 index.html，交由前端路由（如 Vue Router、React Router）接管，而不是返回 404。
理解 SPA 路由的痛点
SPA 的路由由 JavaScript 控制（例如 /user/123），但浏览器刷新或直接访问该 URL 时，请求会发给 Nginx。如果 Nginx 没配置好，它会在文件系统里找 /user/123 对应的静态文件，找不到就返回 404 —— 这就断了路由。
关键配置：try_files 回退到 index.html
在 server 块中，把 location / 设为匹配所有路径，并用 try_files 优先尝试真实文件，最后 fallback 到 /index.html：
示例配置：
server {
listen 80;
server_name example.com;
root /var/www/my-spa;
index index.html;
<pre class="brush:php;toolbar:false;">location / {
try_files $uri $uri/ /index.html;
}}
-
$uri：检查是否存在与请求路径完全一致的文件（如/assets/js/app.js） -
$uri/：检查是否为目录（如/docs/），存在则返回目录索引或index.html -
/index.html：以上都不匹配时，返回根目录下的index.html，前端 JS 加载后自行解析当前 URL 并渲染对应视图
避免干扰静态资源和 API 请求
上面的通用配置可能误将 API 请求也回退到 index.html（比如 /api/users），导致接口失效。需单独声明 API 或静态资源路径：
- API 接口通常代理到后端服务，加独立
location /api块并用proxy_pass - 已知静态资源路径（如
/assets/、/static/）可提前匹配，确保 404 真实返回
增强版示例：
location /api/ {
proxy_pass http://backend/;
proxy_set_header Host $host;
}
<p>location ^~ /assets/ {</p><h1>直接提供静态资源，不走 try_files 回退</h1><pre class="brush:php;toolbar:false;">expires 1y;
add_header Cache-Control "public, immutable";}
location / { try_files $uri $uri/ /index.html; }
注意 history 模式与 base 配置一致性
前端构建时若用了非根路径（如 base: "/app/"），Nginx 的 root 或 alias 必须匹配：
- 若前端打包设
base: "/app/"，则 Nginx 应配location /app/ { ... }，且root指向包含index.html的目录，或改用alias定位子路径 - 推荐统一用
root+ 子location，避免alias与try_files的路径拼接陷阱
不复杂但容易忽略。
