nginx 多个域名指向了同一个端口 nginx同域名部署多个vue项目

【场景】www.web.com 默认访问A项目； www.web.com/webB 访问B项目；www.web.com/webC 访问C项目；

一、在vue.config.js中配置publicPath与outputDir

module.exports = {
	//process.env.NODE_ENV === "production" ? "./" : "/",这种写法有时候会不生效，具体没找到问题原因
	//可以用笨方法，每次打包时手动修改为publicPath:"./",
	publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
	outputDir:"webA",//设置项目打包生成的文件的存储目录,对应项目名称,默认为dist
    devServer: {
        open:true// 自动打开浏览器
    }
}

二、在webA的router文件夹下index.js中设置base，webB、webC项目同理

const router = new VueRouter({
	mode:"hash",
	base:"webA",
  	routes,
})

三、配置Nginx，如果router模式为history则需要加上配置 try_files $uri $uri/ /index.html; 否则刷新会404

四、如果输入www.web.com需要进入默认项目，按下方nginx最后一项设置，反之删除掉即可

server{
	listen			8080;

 	location /webB {
	        # 注意这里是 alias，然后指向的位置使我们生产环境的文件夹的具体位置
	        # 如果报错，末尾加上"/" 即  alias /web/webB/;
	        alias /web/webB;
	        index  index.html index.htm;
	        # uri ，如果router模式为history不加这个项目刷新会出现404问题,hash模式不需要
	        try_files $uri $uri/ /index.html;
    }
   	location /webC {
	      # 注意这里是 alias，然后指向的位置使我们生产环境的文件夹的具体位置
	      # 如果报错，末尾加上"/" 即  alias /web/webC/;
	      alias /web/webC;
	      index  index.html index.htm;
	      # uri ，如果router模式为history不加这个项目刷新会出现404问题,hash模式不需要
	      try_files $uri $uri/ /index.html;
  }

  	# 输入www.web.com需要进入默认webA项目，在webB,webC下面加入以下设置 注意这里是 root 不是 alias 
	location /{
			# 如果报错，末尾加上"/" 即  root /web/webA/;
	        root /web/webA;
	        index  index.html index.htm;
	        # uri ，如果router模式为history不加这个项目刷新会出现404问题,hash模式不需要
	        try_files $uri $uri/ /index.html;
    }
}

五、 建议先在自己的本地测试，nginx中将alias || root指向的路径改为自己本地项目的磁盘路径即可

server{
	listen			8080;

 	location /webB {
	        alias  D:/web/webB;
	        index  index.html index.htm;
	        try_files $uri $uri/ /index.html;
    }

六、有的同学修改路由的base后，调接口报错404

//试着把接口api前面的 “ / ” 去掉或者加上
"/loac/btc-pulic-manager/api/login"
"loac/btc-pulic-manager/api/login"

七、如果登录后刷新页面还是空白页Bug

后台配置支持是否支持：history,history模式是需要后台配置支持的。
原理是要在服务端增加一个覆盖你的路由内所有情况的候选资源，
如果 URL 匹配不到任何候选资源，则定位到打包好的 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置链接：https://router.vuejs.org/zh/guide/essentials/history-mode.html