宝塔面板设置反向代理Vue项目时，开启代理目录配置，访问返回404原因及解决方案

在使用宝塔面板进行反向代理Vue项目时，经常会遇到404问题，这是宝塔面板（Nginx 环境）里非常经典的“代理目录（子目录代理）”坑，尤其在代理 Vue History 模式项目时几乎 100% 会踩到。

想要的效果：

a.com/c/d → 代理到 b.com/c/d
a.com/c/d/ → 代理到 b.com/c/d/
a.com/c/d/about → 代理到 b.com/c/d/about
a.com/ 其他路径 → 不代理，走你本地网站或其他配置

核心原因

Vue（Vue-Router History 模式）前端所有路径（包括 ./c/d、./c/d/xxx、./c/d/about 等）最终都由 index.html 处理。 当你用宝塔“代理目录”功能去代理 ./c/d 时，宝塔默认生成的 Nginx 配置是这样的（简化版）：

location /c/d {                         # 只精确匹配 /c/d

   proxy_pass http://b.com/c/d;         # 注意这里末尾没有 /

}

这会导致两个致命问题：

1. 只有精确访问 http://a.com/c/d 才会代理成功（而且会 301 重定向到 /c/d/）。
2. 访问 http://a.com/c/d/ 或 http://a.com/c/d/about、http://a.com/c/d/user/123 等任何子路径都会直接走本地站点 → 404（因为本地根本没有这些文件）。

宝塔“关闭代理目录”后之所以正常，是因为它会自动生成 ≈ location /c/d/ （末尾带 /）+ proxy_pass http://b.com/c/d/ （末尾也带 /），这样所有子路径都能正确代理。

解决方案-宝塔正确配置

1. 网站 → a.com → 反向代理 → 创建代理。
2. 目标 URL 填：http://b.com/c/d（注意末尾不需要加 /）
3. 代理目录 填：/c/d/（末尾必须带斜杠/）
4. 勾选“开启代理目录”
5. 发送路径选择 默认 就是

这样宝塔会自动生成正确的 location /c/d/ 配置。