本质是避免产生404，用try_files $uri $uri/ /index.html实现静默兜底：优先匹配静态资源和目录，未命中时返回index.html交由前端路由处理；需配合正确root、index index.html;声明、API前置拦截及子路径三处同步调整。
这个问题本质不是“捕获404”，而是**避免产生404**——让 Nginx 在找不到真实文件时，不返回 404，而是返回 index.html，把 URL 解析权交还给前端 JS 路由（如 Vue Router 或 React Router 的 history 模式）。
核心配置：用 try_files 实现兜底
在 location / 块中写入：
try_files $uri $uri/ /index.html;
它按顺序检查：
-
$uri：是否存在对应静态资源（如/static/js/app.js、/logo.png）→ 存在则直接返回 -
$uri/：是否存在同名目录（如请求/admin/，且该目录存在）→ 较少用于 SPA，可保留作为兼容 -
/index.html：以上都不匹配时，内部返回根目录下的index.html（状态码 200），不跳转、不重定向
必须配合的基础项
-
root必须正确指向构建输出目录（如/var/www/html或/www/wwwroot/myapp/dist） -
index index.html;必须声明，否则即使 fallback 到/index.html，Nginx 也可能因索引未定义而报错 - 确保
index.html文件真实存在于root指定路径下，且 Nginx 进程有读取权限
带 API 接口的场景（同域名部署）
若后端接口走 /api/，需优先拦截，防止被 try_files 错误兜底：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 把
location /api/ { proxy_pass http://backend; }放在location /之前 - Nginx 按配置顺序匹配，先命中
/api/就不会进入主location /的兜底逻辑
子路径部署（如部署在 /admin/）
需同步调整三处：
- 前端构建时设置
base: '/admin/'（Vue Router）或homepage: '/admin/'（CRA） - Nginx 中使用
location /admin/ { alias /var/www/admin-dist/; }（注意alias末尾带斜杠） -
try_files $uri $uri/ /admin/index.html;（fallback 路径要与实际index.html位置一致）
⚠️ 不要用 alias 配合 /index.html 这种根路径 fallback，会导致路径拼接错误；此时推荐用 root + 子目录结构，或严格按 alias 规则写 fallback。
验证是否生效的关键动作
- 修改配置后，执行
nginx -t && nginx -s reload（或宝塔面板点「重载配置」） - 浏览器直接访问一个深层路由（如
/user/settings），不通过页面内跳转 - F5 刷新，检查 Network 面板：响应状态码应为 200，响应内容是你的
index.html，且控制台无资源 404 报错
