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;}
立即学习“前端免费学习笔记(深入)”;
当代理已经知道网站路由或内容URL,并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时,请使用sitemap。这是一个发布构件技能,而不是爬虫或SEO平台。
-
$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;
}-
location = /xxx表示精确匹配,性能最好 -
return 301比rewrite ... permanent更清晰、少歧义 - 浏览器和搜索引擎会缓存 301,慎用于临时调整


















