使用nginx部署多个vue项目

一只酸奶牛^_^2025-08-02 16:07

使用nginx部署多个vue项目

产生背景
步骤一：不可忽略的打包配置
- 主项目、子项目配置
- - vue.config.js
  - router.js
步骤二：nginx配置
结语

产生背景

最近公司要上线项目，由于囊中羞涩，需要在一台服务器的同一个域名下面部署多个项目，访问根路径（https://www.domain.com）是主项目，访问https://www.domain.com/project1 是项目1，访问https://www.domain.com/project2 是项目2，但是每个项目里面又有自己的路由，测试多次终于成功，遂记录以供后续查阅。

步骤一：不可忽略的打包配置

主项目、子项目配置

vue.config.js

router.js

步骤二：nginx配置

javascript 复制代码

// 主项目存放路径：/mydata/mainProject
// 项目1存放路径：/mydata/project1/
// 项目2存放路径：/mydata/project2/
server
{
    listen 80;
    server_name www.domain.com;


    location / {
        root /mydata/mainProject;
        index index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /index.html;
    }
    
    location ^~ /project1/ {
        alias /mydata/project1/;
        index index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /project1/index.html;
    }
    location ^~ /project2/ {
        alias /mydata/project2/;
        index index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /project2/index.html;
    }

    location /prod-api/ {
      proxy_pass http://127.0.0.1:8080/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $http_host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
}

结语

可能在部署过程中会遇到奇奇怪怪的问题，有可能是静态资源访问404,301等等，反正就是不断调整打包配置，重复修改nginx配置，最终目前方案可行（小声bb：全部当成子项目来部署方便得多，但是老板说主项目必须是访问域名就可以了，不能在根路径下加前缀）。

如果大家有更好的方案请多多指教。😜😜😜😜😜😜😜😜😜