核心是用 try_files 优先返回真实静态文件,找不到时兜底至 index.html 由前端路由接管;根路径配置为 try_files $uri $uri/ /index.html,子路径需用 alias 和 /subpath/index.html,api 路径须前置 location 精确拦截。

核心是用 try_files 让 Nginx 优先返回真实静态文件,找不到时再交由前端入口(如 index.html)接管,避免刷新或直链访问路由时出现 404。
基础配置:根路径 SPA 路由兜底
适用于部署在域名根路径(如 https://example.com/)的单页应用:
- 在
location /块中写入:try_files $uri $uri/ /index.html; -
$uri尝试匹配请求路径对应的真实文件(如/js/app.js、/logo.png) -
$uri/尝试作为目录访问(如/assets/) -
/index.html是兜底项:所有静态资源不命中时,内部重写为该文件,URL 地址栏不变,由前端路由继续解析路径(如/user/profile) - 需配合
root指向构建产物目录,例如root /var/www/dist;
子路径部署:注意 alias 与兜底路径匹配
若前端部署在子路径(如 https://example.com/admin/),不能直接复用根路径配置:
- 前端构建时必须设置
base="/admin/"(Vue)或basename="/admin/"(React Router v6+) - Nginx 中使用
alias(不是root),且末尾带斜杠:location /admin/ { alias /var/www/my-admin/dist/; } -
try_files的兜底项要写成/admin/index.html,而非/index.html:try_files $uri $uri/ /admin/index.html; - 原因:Nginx 会把
alias路径自动拼接到该 URI 前,写错会导致去根目录找文件而返回 404
排除 API 请求:防止后端接口被错误兜底
API 路径(如 /api/、/auth/)必须提前拦截,否则也会被 try_files 送到 index.html:
- 用独立
location块精确匹配 API 前缀:location /api/ { proxy_pass https://backend; } - 确保该块在
location /之前定义,利用 Nginx “最长前缀匹配”规则优先生效 - 也可用正则匹配更复杂的接口路径,例如:
location ~ ^/(api|auth|v1)/ { proxy_pass http://127.0.0.1:8000; }
动静分离下的扩展用法:静态失败后转给后端
某些场景下,你希望静态资源缺失时不是返回 index.html,而是交给 Node.js、Python 等后端动态处理:
- 定义命名 location:
location @backend { proxy_pass http://127.0.0.1:3000; } - 在主 location 中使用:
try_files $uri $uri/ @backend; - 所有未命中静态文件的请求(包括动态页面、部分 API)都会被代理到后端
- 注意:
@backend是内部跳转,不改变浏览器 URL,也不触发重定向











