Nginx部署SPA需配置try_files $uri $uri/ /index.html，使所有非静态资源请求兜底至index.html，由前端路由接管；子路径需对应调整fallback路径，API接口须单独location优先匹配以防误捕获。
在Nginx中部署Vue、React等单页应用（SPA）时，前端路由采用History模式，页面跳转不依赖服务端，但用户手动刷新或直接访问子路由（如 /user/profile），Nginx默认会尝试查找对应路径的静态文件或目录。若该路径下无真实文件，Nginx返回404——这不是后端接口问题，而是静态资源服务配置缺失。
理解Try-Files的工作逻辑
try_files 是Nginx按顺序检查文件或路径是否存在，并将请求内部重写到第一个存在的目标。对SPA而言，核心思路是：**所有非真实资源的请求，都 fallback 到 index.html，由前端路由接管**。
典型写法：
try_files $uri $uri/ /index.html;
含义依次为：
-
$uri：检查请求路径是否对应真实文件（如/logo.png） -
$uri/：检查是否为真实目录（如/assets/） -
/index.html：以上都不匹配时，内部重写到根入口文件，浏览器URL不变，但返回 index.html 内容
正确配置Location块的位置与范围
该指令必须放在能覆盖所有前端路由的 location 块中，常见错误是只写在 location / 下却忽略了其他前缀。推荐在 server 块内使用 root 定义静态资源根目录，并在通用 location 中启用 try_files：
server {
root /var/www/my-spa;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
注意：
• 不要加 rewrite 或 return 301 干扰流程
• 若项目部署在子路径（如 /admin/），需调整 root 和 try_files 的 fallback 路径（例如 /admin/index.html）
排除API请求被误捕获
如果前后端同域（如 API 接口也走 /api/xxx），需确保接口请求不被 try_files 拦截。方法是在 SPA 的 location 外单独定义 API location：
location /api/ {
proxy_pass http://backend;
proxy_set_header Host $host;
}
location / {
try_files $uri $uri/ /index.html;
}
因 Nginx location 匹配遵循最长前缀优先原则，/api/ 会先于 / 匹配，从而绕过 SPA fallback。
验证与调试技巧
配置生效后，可通过以下方式确认行为正常：
- 访问一个真实静态文件（如
/favicon.ico）→ 应正常返回 - 访问一个不存在的静态路径（如
/nonexistent.js）→ 应返回 404（不是 index.html） - 访问一个前端路由（如
/dashboard）→ 应返回 200 且内容为 index.html，浏览器地址栏保持/dashboard
若仍报404，检查：
• Nginx 配置是否已重载（nginx -s reload）
• root 路径下是否存在 index.html
• 浏览器开发者工具 Network 面板中响应头是否含 X-Accel-Redirect（说明内部重写成功）
