使用nginx部署多个vue项目
产生背景
最近公司要上线项目,由于囊中羞涩,需要在一台服务器的同一个域名下面部署多个项目,访问根路径(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:全部当成子项目来部署方便得多,但是老板说主项目必须是访问域名就可以了,不能在根路径下加前缀)。
如果大家有更好的方案请多多指教。😜😜😜😜😜😜😜😜😜