nginx前端路由重写核心目标是内部映射请求至index.html，避免404：使用try_files $uri $uri/ /index.html实现spa兜底；子路径部署需配合alias或rewrite剥离前缀（如^/admin/(.*)$ /$1 break），确保前端js正确解析history路由。
前端路由重定向时，Nginx 的 URL 重写核心目标是：让浏览器地址栏显示的路径（如 /app/user/123）能被正确转发给前端静态资源服务，同时不触发 404 —— 尤其在使用 Vue Router、React Router 等 History 模式时。
关键前提：区分重写（rewrite）和重定向（redirect）
前端路由依赖的是「内部路径重写」，不是跳转。用户访问 /dashboard，Nginx 应把请求内部映射到 /index.html，由 JS 路由接管，而不是返回 301/302 让浏览器再发一次请求。
- 重写（rewrite + last/break）：服务器端修改请求路径，客户端无感知，只发生一次请求
- 重定向（return 301/302 或 rewrite ... permanent/redirect）：浏览器收到状态码后主动发起新请求，地址栏会变，会多一次 HTTP 往返
标准单页应用（SPA）配置：用 try_files 最稳妥
这是官方推荐方式，简洁、安全、无需正则，适用于绝大多数 Vue/React/Angular 项目。
location / {
root /var/www/my-spa;
index index.html;
<pre class="brush:php;toolbar:false;"># 关键：所有非真实文件/目录的请求，都回退到 index.html
try_files $uri $uri/ /index.html;}
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
$uri：先尝试匹配真实文件（如/logo.png） -
$uri/：再尝试匹配同名目录（如/assets/） -
/index.html：都不命中时，内部返回index.html，由前端 JS 解析路由
带子路径部署时：精准剥离前缀
若前端构建时设置了 base: '/admin/'，访问地址是 http://example.com/admin/user，需把 /admin/xxx 映射到 /xxx 再交给前端处理。
location /admin/ {
alias /var/www/my-admin/;
index index.html;
<pre class="brush:php;toolbar:false;"># 注意：alias 后路径末尾有斜杠，$uri 自动去掉 /admin/ 前缀
try_files $uri $uri/ /admin/index.html;}
或更通用的 rewrite 方式（适合复杂路径规则）：
location /admin/ {
rewrite ^/admin/(.*)$ /$1 break;
root /var/www/my-admin;
try_files $uri $uri/ /index.html;
}
-
rewrite ^/admin/(.*)$ /$1 break;：把/admin/user/1变成/user/1，并在当前 location 继续处理 -
break防止后续 location 再次匹配，避免循环
需要真正重定向的场景：比如旧路径迁移
当你要把已上线的 /old-page 永久导向 /new-page，应明确返回 301：
location = /old-page {
return 301 /new-page;
}
<h1>或带参数保留的重定向</h1><p>location ~ ^/v1/(.*)$ {
return 301 /v2/$1;
}</p>
-
location = /xxx表示精确匹配，性能最好 -
return 301比rewrite ... permanent更清晰、少歧义 - 浏览器和搜索引擎会缓存 301，慎用于临时调整
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
