nginx 支持 spa 前端路由需策略性兜底：用 try_files $uri $uri/ /index.html 实现路径 fallback；子路径部署用 alias 和对应 fallback 路径；优先匹配 api 和静态资源避免误兜底；root 和 index 配置须准确。
要让 Nginx 正确支持单页应用（SPA）的前端路由，关键不是“匹配”所有路径，而是**有策略地兜底**——把非静态资源的请求都交还给 index.html，由前端路由（如 Vue Router、React Router 的 history 模式）来解析和渲染。
必须配置 try_files 实现兜底
在 location / 块中写入：
try_files $uri $uri/ /index.html;
这三部分按顺序检查：
-
$uri：看请求路径是否对应真实文件（比如/js/app.js、/logo.png） -
$uri/：看是否为真实目录（比如/assets/，会尝试加载该目录下的index.html） -
/index.html：前两者都不命中时，内部重写为根目录的index.html，URL 不变，前端 JS 可继续读取当前路径做路由跳转
子路径部署要改用 alias + 调整 fallback 路径
如果应用部署在 https://example.com/myapp/ 这类子路径下，不能直接用 root，否则路径拼接会出错。应这样写：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。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（不是root），且末尾不加斜杠；alias是把 location 前缀替换成指定路径 -
try_files中的 fallback 必须写成/myapp/index.html，而不是/index.html，否则 Nginx 会去站点根目录找，找不到就 404
提前拦截 API 和静态资源，避免被兜底误伤
Nginx 的 location 匹配是“最长前缀优先”，所以要把更具体的规则放在 location / 前面：
-
location /api/ { proxy_pass http://backend/; }—— 确保所有/api/xxx请求先被代理，不会进兜底逻辑 -
location ~* \.(js|css|png|jpg|gif|svg|woff2?|ttf|eot)$ { expires 1y; }—— 显式处理静态资源，加缓存头，也防止它们被location /的兜底规则意外覆盖
别漏掉 index 指令和 root 路径准确性
虽然 try_files 是核心，但基础设置也不能错：
-
root必须指向构建产物的上一级目录。例如构建后文件在/var/www/my-spa/，就写root /var/www;，再配合location / { ... }；如果写成root /var/www/my-spa;，那$uri就会去错地方找 - 保留
index index.html;，对根路径/的访问仍起作用，和try_files协同不冲突
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
