nginx同一端口部署多个vue项目

背景

因该应用嵌入在企业微信中，且企业微信中内置的网页应用配置主页需要二级域名所以导致测试新增功能时还须使用原有域名，这就导致一个端口需要运行两个vue项目。

nginx配置文件

server {
        listen       53211; #监听的端口 也就是域名映射出去的端口
        server_name  localhost;

        location / { #生产环境项目
            root   html;
            #index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
            proxy_pass  http://localhost:8089;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }
		location /en { #测试环境项目
            alias  html/en;
            try_files $uri $uri/ /en/index.html;
            index  index.html;
         }
    }

重点代码

	    location /en { #测试环境项目
            alias  html/en;
            try_files $uri $uri/ /en/index.html;
            index  index.html;
         }

vue中修改如下配置
vue.vue.config.js文件中修改publicPath路径为/en/

module.exports = {
    publicPath: "/en/",
    devServer: {
        proxy: {
            '/api':{
                changeOrigin:true,
                // target: 'http://10.1.0.236:8089',
                target: 'http://localhost:8089',
                pathRewrite: {
                    '^/api': ""//将api替换成‘’
                }
            },
        },
        port:8090
    },
    lintOnSave: false
}

router文件夹中index.js文件中修改base为 ‘/en/’

const router = new VueRouter({
  mode: 'history',
  base: '/en/',
  routes
})

vue代码修改完毕后npm run build 将生成的dist中的文件复制到nginx配置的对应路径中如下代码

location /en {
  alias  html/en;#将dist中的文件复制到该路径中
   try_files $uri $uri/ /en/index.html;
   index  index.html;
}

最后重启nginx

Windows下启动、重启、停止nginx
在Windows下操作nginx，需要打开cmd 进入到nginx的安装目录下

1.启动nginx:

   start nginx 或 nginx.exe

2.停止nginx(stop是快速停止nginx，可能并不保存相关信息；quit是完整有序的停止nginx，并保存相关信息)

  nginx.exe  -s stop 或 nginx.exe -s quit

3.检查 重启：

  nginx -t  修改nginx配置后执行检查配置是否正确

  nginx -s reload 重启

吃水不往挖井人：
1、通过该博主视频学会的nginx部署vue项目
2、nginx 同一端口部署多个项目