Nginx 中怎么配置 Try_files 实现单页面应用前端路由-Nginx-PHP中文网

核心是try_files $uri $uri/ /index.html;，用于spa前端路由兜底：根路径用root+index.html，子路径用alias+对应路径fallback，api和静态资源需前置独立location排除误兜底。

nginx 中怎么配置 try_files 实现单页面应用前端路由

核心就是一行配置：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;
}