nginx同一域名同一端口部署多个vue项目之前端操作

场景

上个月遇到了我们的后端同事需要将多个vue项目部署到同一域名同一端口下，下面记录一下当时我们两个里面前端的操作有哪些。
例如有一个产品，它分为3个产品模块，有三个vue的项目想部署到同一域名下
访问路径想为如下所示：
xxx.xxx.com:8089/productA
xxx.xxx.com:8089/productB
xxx.xxx.com:8089/productC

方法

前端我进行了3个操作，剩余nginx那里由后端来处理

1.public/index.html文件
head标签里加入如下代码

<meata base="/productA/">

2.src/router/index.js文件

const createRouter = () => 
	new Router({
    
    
		base: '/productA/' // 这就是我们要添加的代码
	})

3.vue.config.js文件

publicPath: '/productA/' // publicPath改为要访问的域名后面跟的入口

另外2个vue项目改为productB和productC同理。
ok啦！前端vue项目里就配置这些，剩余的nginx配置由后端配置好后就可以了。