核心是用try_files $uri $uri/ /index.html实现前端路由兜底，$uri匹配静态资源，$uri/匹配目录，/index.html为最终fallback；API需前置location /api/拦截，子路径部署须同步调整前端base和Nginx location及fallback路径。
核心就是让 Nginx 在找不到真实文件或目录时，自动返回 index.html，把路由控制权交还给前端 JS。这不是重定向，而是内部尝试匹配的兜底逻辑。
基础 location 配置（最常用）
适用于纯前端项目、无后端 API 同域部署的场景：
- 确保
root指向你的构建输出目录（如/www/wwwroot/myapp/dist） - 在
location /块中写入这一行：
try_files $uri $uri/ /index.html; -
$uri匹配真实存在的静态资源（.js、.css、.png 等） -
$uri/尝试匹配目录（避免把/api/这类路径误判为目录） -
/index.html是最终 fallback，必须以斜杠开头（表示根路径下的文件）
带 API 接口的生产环境配置
当你的前端和后端 API 共用同一个域名（如 /api/xxx），需优先拦截 API 请求，防止被 fallback 覆盖：
- 先单独声明 API 路由：
location /api/ { proxy_pass http://backend-server; } - 再配置主路由：
location / { try_files $uri $uri/ /index.html; } - 顺序很重要：Nginx 按照配置块出现顺序匹配，
/api/必须写在/前面 - 静态资源（如
/static/、/img/）也可单独配置，提升命中效率
子目录部署时的注意事项
如果你的 Vue 应用不是部署在域名根路径，而是类似 https://example.com/admin/，需同步调整两处：
立即学习“前端免费学习笔记（深入）”；
- 前端构建时设置
publicPath: '/admin/'（Vue CLI）或base: '/admin/'（Vue Router 4+） - Nginx 中的
location改为子路径：
location /admin/ { alias /www/wwwroot/myapp/dist/; try_files $uri $uri/ /admin/index.html; } - 注意
alias末尾有斜杠，且try_files的 fallback 路径要与实际index.html位置一致
验证是否生效的关键点
改完配置别急着庆祝，务必检查这几项：
- 点击宝塔面板的「重载配置」或「重启 Nginx」——保存 ≠ 生效
- 浏览器直接访问一个深层路由（如
/user/profile），不通过点击跳转 - F5 刷新，确认状态码是 200，不是 301/302 重定向或 404
- 打开开发者工具 Network 面板，查看 HTML 响应体是否为你的
index.html内容 - 检查 JS 控制台有没有路由解析失败或资源 404（说明静态路径没配对）
