宝塔面板单域名部署多个 Vue 项目：从路径冲突到完美共存

在服务器运维中，我们经常遇到这样的需求：只有一个域名，但需要同时部署主站、管理后台 、移动端项目 ，甚至还有一个 Node.js 后端。

很多开发者在配置时会遇到"静态资源 404"、"刷新页面 404"或"Nginx 配置文件冲突"的问题。今天，我就以实战经验教大家如何一站式解决这些痛点。

一、核心逻辑：路径分流

我们的目标是通过不同的 URL 后缀来访问不同的项目：

exam.com/ -> 访问 Web 主项目
exam.com/web -> 访问 Web 镜像/备份
exam.com/auth -> 访问授权/认证项目
exam.com/api` -> 转发到 Node.js 后端服务

二、前端配置（打包前的关键）

Vue 是单页面应用（SPA），在子目录下运行必须修改"基准路径"。

1. 修改 `router/index.js`

在创建路由实例时，指定 base 路径：

javascript 复制代码

const router = createRouter({
  history: createWebHistory('/auth/'), // 根据子目录名修改
  routes,
});

2. 修改打包配置

Vite : 在 vite.config.ts 中设置 base: '/auth/'。
Vue CLI : 在 vue.config.js 中设置 publicPath: '/auth/'。

三、 Nginx 配置：解决"多胞胎"冲突

在宝塔面板中，手动修改【网站设置】->【配置文件】。

1. 解决 `duplicate location "/"` 错误

这是最常见的错误。如果你开启了宝塔的"反向代理"，宝塔会自动生成一个 location /。如果你在配置文件里又写了一个，Nginx 就会报错。

解决方案：

将 Node.js 后端的代理目录改为 /api（在宝塔反向代理界面修改），并在主配置文件中删除或注释掉多余的根路径配置。

2. 完美的 Nginx 配置文件参考

nginx 复制代码

server {
    listen 80;
    server_name yourdomain.com;

    # --- 1. 根目录：部署主项目 ---
    location / {
        root /www/wwwroot/dist/web; # 指向 web 项目
        index index.html;
        try_files $uri $uri/ /index.html; # 解决 History 模式刷新 404
    }

    # --- 2. 子目录项目：使用 alias 而非 root ---
    location /auth {
        alias /www/wwwroot/dist/auth/; # 末尾必须带斜杠
        index index.html;
        try_files $uri $uri/ /auth/index.html; # 注意这里的路径包含前缀
    }

    # --- 3. 后端 API 转发 ---
    # 建议通过宝塔自带的反向代理配置，但代理目录要设为 /api
    include /www/server/panel/vhost/nginx/proxy/yourdomain/*.conf;
}

四、避坑指南（Q&A）

Q：为什么页面显示出来了，但 CSS/JS 文件报 404？
A：这是因为打包时的 base 路径没设置对。检查 dist/index.html 里的资源引用路径，如果显示的是 <script src="/js/app.js">，那在子目录下肯定找不到。它应该是 <script src="/auth/js/app.js">。

Q：刷新页面就显示 404 怎么回事？
A：这是 Vue History 模式的特性。Nginx 找不到这个虚拟路径的文件。必须配置 try_files，让所有请求都 fallback 到 index.html。

Q：配置保存失败，提示配置错误？
A：检查大括号 {} 是否闭合，检查每一行是否以分号 ; 结尾。最重要的是，全局搜索是否出现了两个 location /。

五、总结

单域名多项目部署的核心在于：前端改 base，后端改 alias，API 加前缀。只要理清了 Nginx 的路径匹配逻辑，再复杂的项目结构也能轻松驾驭。

宝塔面板单域名部署多个 Vue 项目：从路径冲突到完美共存