使用nginx部署多个vue项目

使用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:全部当成子项目来部署方便得多,但是老板说主项目必须是访问域名就可以了,不能在根路径下加前缀)。

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

相关推荐
孙克旭_7 小时前
day064-kodbox接入对象存储与配置负载均衡
linux·运维·阿里云·负载均衡
知识分享小能手12 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
YGY Webgis糕手之路1 天前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路1 天前
Cesium 快速入门(二)底图更换
前端·经验分享·笔记·vue
YGY Webgis糕手之路1 天前
Cesium 快速入门(七)材质详解
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路1 天前
Cesium 快速入门(八)Primitive(图元)系统深度解析
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路2 天前
Cesium 快速入门(四)相机控制完全指南
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路2 天前
Cesium 快速入门(六)实体类型介绍
前端·经验分享·笔记·vue·web
YGY Webgis糕手之路2 天前
Cesium 快速入门(一)快速搭建项目
前端·经验分享·笔记·vue·web