核心是配置try_files $uri $uri/ /index.html;，让Nginx在找不到静态文件或目录时兜底返回index.html，由前端路由接管渲染；需置于location /块内，配合root、子路径用alias及/api/等独立代理规则协同生效。
在 Nginx 中用 try_files 实现单页应用（SPA）前端路由兜底，核心是让所有非静态资源请求都 fallback 到 index.html，交由前端路由处理。
为什么需要 try_files 兜底
单页应用（如 Vue Router、React Router 的 history 模式）依赖浏览器 History API 跳转，URL 看似“真实路径”，但实际没有对应服务端文件。若用户直接访问 /user/profile 或刷新该页面，Nginx 默认会返回 404（找不到该路径下的物理文件）。try_files 可按顺序检查文件/路径是否存在，并在全部失败时返回指定 fallback（通常是 index.html），从而让前端路由接管。
基础 try_files 配置（推荐）
在 location / 块中使用：
location / {
try_files $uri $uri/ /index.html;
}
立即学习“前端免费学习笔记（深入）”；
说明：
• $uri：匹配请求路径对应的静态文件（如 /js/app.js、/logo.png）
• $uri/：尝试作为目录访问（如 /assets/）
• /index.html：以上都不命中时，内部重写为根目录的 index.html，且 URL 不变（前端仍看到 /user/profile）
更健壮的配置（处理子目录部署）
若应用部署在子路径（如 https://example.com/myapp/），需确保 index.html 中的资源引用和路由 base 一致，Nginx 配置也需适配：
location /myapp/ {
alias /var/www/myapp/;
try_files $uri $uri/ /myapp/index.html;
}
注意：
• 使用 alias（不是 root），避免路径重复拼接
• try_files 中 fallback 写成 /myapp/index.html，而非 /index.html，否则会去站点根目录找
排除 API 请求，避免误兜底
要防止后端 API（如 /api/xxx）也被 fallback 到 index.html，应提前用独立 location 拦截：
location /api/ {
proxy_pass https://backend;
}
location / {
try_files $uri $uri/ /index.html;
}
因为 Nginx location 匹配遵循最长前缀优先原则，/api/ 会先被精确匹配并代理，不会进入根 location 的 try_files 流程。
