一个nginx同时部署多个vue项目，访问不同的路径打开不同的项目

vue项目打包

• 注意： 通过 www.xxx.com/sysweb访问的项目需要配置vue.config.js

const webpack = require("webpack");
module.exports = {
 publicPath:"/sysweb/", 
};

nginx配置

server {
        listen       80;
        server_name  www.xxx.com;
        #第一个项目 访问方式 www.xxx.com
        location / {
           root /opt/ty/h5; # 这里填入项目位置
		   index  index.html index.htm;
		   try_files $uri $uri/ @router;
        }
        #第二个项目 访问方式 www.xxx.com/sysweb
        #名称与vue.config.js 配置文件的publicPath一致
		location /sysweb {
            alias   /opt/ty/sysweb; #这里填入项目位置
            try_files $uri $uri/ /sysweb/index.html;
	   		index  index.html index.htm;
        }
	
		location @router {
		    rewrite ^.*$ /index.html last;
		}
       
        location = /50x.html {
            root   html;
        }
}

• 第二个项目建议路由配置一个通过 / 可以访问到的页面，我在测试的时候发现我的第二个项目登录页是/login，然后通过www.xxx.com/sysweb/login访问总是空白页。然后我把/login 改成 / 再通过www.xxx.com/sysweb就可以正常访问。