nginx下同域名部署多个vue项目

nginx下同域名部署多个vue项目

一、描述

想要在同一个域名下部署多个前端项目，同一个域名下登录了另一个不需要登录，通过不同的url来区分项目
如果mes和wms
输入localhost:8181/mes/,则展示mes项目
输入localhost:8181/wms/,则展示wms项目

二、nginx代码

 server {
        listen       81;
        server_name  localhost;




        location / {
            root   C:\ccs\mes;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
        location /wms {
            alias  C:\ccs\wms;
            try_files $uri $uri/ /wms/index.html;
            index  index.html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        gzip on;  #是否开启gzip模块 on表示开启 off表示关闭
        gzip_buffers 4 16k;  #设置压缩所需要的缓冲区大小
        gzip_comp_level 6;  #压缩级别1-9，数字越大压缩的越好，也越占用CPU时间
        gzip_min_length 100k;  #设置允许压缩的最小字节
        gzip_http_version 1.1;  #设置压缩http协议的版本,默认是1.1
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;  #设置压缩的文件类型
        gzip_vary on;  #加上http头信息Vary: Accept-Encoding给后端代理服务器识别是否启用 gzip 压缩
    }

三、项目放置说明

nginx里的地址要和这里的位置对应

以wms举例:wms项目的访问地址、路由统一加上wms前缀（其他项目类似）