核心是配置try_files $uri $uri/ /index.html;，让nginx在找不到真实文件或目录时兜底返回/index.html，由前端路由接管渲染；需置于location /块内，配合root、子路径用alias及/api/等独立代理规则协同生效。
在 Nginx 中为单页应用（SPA）配置路由，核心是让所有前端路由都 fallback 到 index.html，由前端路由库（如 Vue Router、React Router）接管。这靠 try_files 指令配合 location 块实现，关键是避免 Nginx 尝试查找不存在的物理路径而返回 404。
基础写法：兜底到 index.html
最常用、最安全的方式是将所有非静态资源请求都交由前端处理：
location / {
try_files $uri $uri/ /index.html;
}
说明：
-
$uri：先检查请求路径是否对应真实文件（如/logo.png、/main.js），存在则直接返回； -
$uri/：再检查是否为真实目录（如/assets/），存在则尝试索引页（需开启index index.html;）； -
/index.html：前两者都不匹配时，强制返回根目录下的index.html，前端 JS 负责解析 URL 并渲染对应视图。
排除静态资源，提升效率
如果静态资源（JS/CSS/图片等）都放在 /static/ 或 /assets/ 下，可单独配置，避免每次请求都走三次判断：
location / {
try_files $uri /index.html;
}
location ^~ /static/ {
root /var/www/my-spa;
expires 1y;
add_header Cache-Control "public, immutable";
}
说明：
-
^~ /static/表示前缀匹配且优先于正则 location，Nginx 不再检查后续location /； -
root指向实际静态文件目录（注意：与alias不同，root会拼接完整路径）； - 静态资源加缓存头，减少重复请求。
适配 history 模式 + 自定义 base 路径
若 SPA 部署在子路径下（如 https://example.com/myapp/），且使用 history 模式，需确保：
- 前端构建时设置正确的
base: '/myapp/'（Vue CLI / Vite）或basename（React Router v6）； - Nginx 将该路径下的所有非静态请求也 fallback 到
/myapp/index.html：
location /myapp/ {
alias /var/www/my-spa/;
try_files $uri $uri/ /myapp/index.html;
}
注意：alias 末尾带斜杠时，/myapp/xxx 会映射到 /var/www/my-spa/xxx；try_files 中的 /myapp/index.html 是相对于 root 的路径，因此推荐统一用 root + index 配合重写更清晰：
location /myapp/ {
root /var/www/my-spa;
index index.html;
try_files $uri $uri/ /myapp/index.html;
}
常见坑点提醒
以下情况容易导致 404 或白屏：
-
没加
index index.html;：当访问/about/（结尾带斜杠）时，$uri/匹配的是目录，但若未声明index文件，Nginx 默认不自动找index.html； -
混用
root和alias：二者行为不同，alias替换路径，root拼接路径，错误使用会导致 404； -
HTTPS 或反向代理后丢失原始路径：确保
proxy_pass后端正确传递Host和X-Forwarded-*头，但对try_files本身影响不大； -
开发环境 vs 生产环境路径不一致：构建输出路径（如
dist/）要和 Nginx 的root保持一致。
