nginx 中用 try_files 处理 spa 的核心是让所有前端路由请求内部重写至 index.html，由 js 路由接管；需按顺序配置 root、index 和 try_files，并分离 api、静态资源及子路径部署，同时禁用 index.html 缓存以确保更新生效。

在 Nginx 中用 try_files 处理单页应用（SPA），核心是让所有前端路由请求最终落到 index.html，由 JavaScript 路由库（如 Vue Router、React Router）接管渲染，而不是返回 404。这不靠重定向，而是内部重写，URL 不变、体验无缝。

基础配置：三行搞定主逻辑

把以下三行放进 location / 块里，顺序不能乱：

• root 指向构建产物根目录（例如 /var/www/my-spa），确保里面真有 index.html
• index index.html 显式声明默认首页，避免某些边缘场景 fallback 失效
• try_files $uri $uri/ /index.html：先查真实文件（/js/app.js）、再查同名目录（/blog/）、最后兜底到 /index.html

避开常见陷阱：API 和静态资源别被误兜底

如果没处理好，/api/login 可能返回 HTML，/logo.png 可能加载失败——这不是 try_files 本身的问题，而是匹配顺序和 location 划分没到位：

PyCharm 2026.2.0.1 Linux版

PyCharm 2026.2.0.1 Linux版提供 JetBrains 官方 2026.2.0.1 版本安装包，适合需要指定 PyCharm 版本进行 Python 项目开发、运行和调试的用户。

下载

• 后端接口必须单独剥离：比如所有 API 以 /api/ 开头，就加一个 location /api/ { proxy_pass http://backend/; }，且写在 location / 之前
• 静态资源优先直出：用正则 location 提前拦截常见后缀，例如：
  

  location ~* \.(js|css|png|jpg|svg|woff2|ttf|eot|webp)$ {<br>  expires 1y;<br>  add_header Cache-Control "public, immutable";<br>}

  
  这条要放在 location / 前面，确保资源不进兜底流程

子路径部署：前后端配置要同步

如果应用跑在 https://example.com/admin/ 这类子路径下，光改前端 base: "/admin/" 不够，Nginx 也得适配：

• 用 alias 替代 root：
  

  location /admin/ {<br>  alias /var/www/my-spa/;<br>}

• try_files 的兜底路径要带前缀：
  try_files $uri $uri/ /admin/index.html;
• 注意 /admin/ 末尾的斜杠不能少，否则 alias 路径拼接会出错

增强健壮性：加点小细节更省心

上线后偶尔白屏或控制台报错？可能是缓存或状态码问题：

• 给 index.html 关掉缓存：
  

  location = /index.html {<br>  add_header Cache-Control "no-cache, no-store, must-revalidate";<br>}

• 确保构建产物用了内容哈希（如 app.a1b2c3.js），这样静态资源才能放心设长期缓存
• 验证是否生效：用 curl -I https://your-domain.com/some-random-path，状态码应为 200，Content-Type 是 text/html，且响应体是 index.html 内容