nginx中用try_files实现spa路由分发，核心是location / { try_files $uri $uri/ /index.html; }，优先匹配静态文件和目录，否则返回index.html由前端路由接管；需前置配置api代理（如location ^~ /api/）避免被fallback，部署子路径时配合alias与base href确保资源正确加载。
在 Nginx 的 server 块中，用 try_files 实现单页面应用（SPA）的路由分发，核心是让所有前端路由（如 /user/profile、/dashboard）都 fallback 到 index.html，由前端路由库（如 Vue Router、React Router）接管渲染，同时不破坏静态资源的正常访问。
关键配置：用 try_files 捕获所有路由并回退到 index.html
典型写法如下：
location / {
try_files $uri $uri/ /index.html;
}
这行配置的含义是：
- 先尝试匹配请求路径是否真实存在对应文件（
$uri），比如/logo.png、/js/app.js； - 若不存在，再尝试是否为真实目录（
$uri/），比如/assets/； - 都不匹配时，返回
/index.html（注意是带斜杠的路径，Nginx 会内部重写为根目录下的该文件）。
这样，访问 /about 或 /product/123 这类前端路由时，Nginx 不报 404，而是返回 index.html，JS 加载后由前端路由解析 URL 并渲染对应视图。
避免静态资源被错误 fallback
上面的基础配置在多数场景可用，但有个常见陷阱：如果 SPA 构建产物中包含类似 /app.js 或 /css/main.css 的文件，而你又没部署在根路径（比如部署在 /myapp/ 下），直接用 try_files $uri $uri/ /index.html 可能导致资源 404。
解决方法是显式声明静态资源路径优先级，例如：
location / {
try_files $uri $uri/ /myapp/index.html;
}
<h1>显式处理静态资源目录（可选，更安全）</h1><p>location ^~ /myapp/static/ {
expires 1y;
add_header Cache-Control "public, immutable";
}</p>
或者更推荐的做法：把 SPA 部署在根路径，或使用子路径 + base 配置（如 Vue 的 public/index.html 中设 <base href="/myapp/">），并在 Nginx 中统一加前缀：
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
location /myapp/ {
alias /var/www/myapp/;
try_files $uri $uri/ /myapp/index.html;
}
注意：alias 后路径末尾要带斜杠，且 try_files 中的 /myapp/index.html 是相对于 alias 指向的根目录的路径。
配合 error_page 处理 404（可选增强）
有些团队习惯用 error_page 404 回退，效果类似但语义不同：
location / {
try_files $uri $uri/ =404;
}
<p>error_page 404 /index.html;
location = /index.html {
internal;
}</p>
这种方式更明确地把“未命中”转为内部重定向到 index.html，避免外部重定向（302），也防止用户看到真实 404 页面。但日常使用中，第一种 try_files ... /index.html 更简洁直接。
务必禁用 API 路由的 fallback
SPA 的前端路由只应接管 HTML 页面请求，API 请求（如 /api/users）必须透传给后端，不能被 try_files 拦截。
因此，要在 location / 之前定义 API 的 location 块：
location ^~ /api/ {
proxy_pass http://backend;
proxy_set_header Host $host;
}
^~ 前缀确保该规则优先于正则和普通前缀匹配，保证所有以 /api/ 开头的请求都走代理，不会落入 try_files 的兜底逻辑。
