核心是try_files $uri $uri/ /index.html;，用于SPA前端路由兜底：根路径用root+index.html，子路径用alias+对应路径fallback，API和静态资源需前置独立location排除误兜底。
核心就是一行配置：try_files $uri $uri/ /index.html;，放在 location / 块里，让所有找不到真实文件或目录的请求，都静默返回 index.html，交由前端路由（如 Vue Router、React Router）解析和渲染。
基础配置：根路径部署
适用于应用部署在域名根下（如 https://example.com/）：
-
root必须指向构建产物的物理根目录，例如/var/www/my-spa，且该目录下存在index.html -
location /块中写入完整指令，顺序不可调换 - 推荐显式声明
index index.html;，避免某些边缘场景 fallback 失效
示例：
location / {root /var/www/my-spa;
index index.html;
try_files $uri $uri/ /index.html;
}
子路径部署：比如 /admin/ 或 /myapp/
当访问地址是 https://example.com/admin/ 时，不能用 root，必须改用 alias，并同步调整兜底路径：
立即学习“前端免费学习笔记（深入）”；
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
alias后路径末尾要带斜杠，例如alias /var/www/admin/dist/; -
try_files中的 fallback 要写成/admin/index.html（不是/index.html） - 前端构建时需设置对应
base（Vue）或basename（React Router），保持路径一致
示例：
location /admin/ {alias /var/www/admin/dist/;
try_files $uri $uri/ /admin/index.html;
}
排除干扰：API 和静态资源不被兜底
否则接口返回 HTML、JS 加载失败，问题更隐蔽：
- 所有后端 API 路径（如
/api/、/auth/）必须单独定义location，并放在location /之前 - 常用静态资源后缀（
.js、.css、.png等）建议用正则location ~*提前拦截，启用缓存 - Nginx 按最长前缀匹配，所以
/api/一定优先于/，不会进入 try_files 流程
示例片段：
location /api/ {proxy_pass http://backend/;
}
location ~* \.(js|css|png|jpg|svg|woff2?|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
location / {
root /var/www/my-spa;
try_files $uri $uri/ /index.html;
}
验证是否生效
别只看页面能不能打开，重点检查三类请求的行为：
- 访问真实静态文件（如
/logo.png）→ 应返回 200，内容正确 - 访问不存在的路径（如
/nonexistent.js）→ 应返回 404（不是 index.html） - 访问前端路由（如
/user/profile）→ 应返回 200，响应体是index.html，浏览器地址栏保持原样
