前端多项目合并部署
问题场景描述：反洗钱将多个服务单元合并为一个服务，要将多个项目放到一个码云里边，走一个流水线配置，但本地开发还是单独维护各个子项目。
解决方案：新建一个vue项目作为最外层包裹项目，新建packages文件夹存放各个子项目，修改配置信息将各个子项目打包到dist的不同目录里边相互独立，通过不同的二级路由去访问各个子项目页面。
一、实现步骤
1、未使用.env区分环境情况
文件目录
（1）pageages文件：存放所有子项目
（2）package.json文件：这个文件的script字段里面主要配置构建脚本，使用PROJECT_NAME变量来区分构建的是那个项目
增加workspaces参数，它的作用是可以直接在最外层的vue项目上执行npm install命令下载所有子项目的依赖，但这个配置项的node要求为16+，因为我们当前项目的node为14.15.1，所以我在最外层直接执行npm install报错了，使用npm install -- legacy-peer-deps 命令可以成功下载依赖。
（3）vue.config.js文件：这个文件里面主要是webpack相关配置
通过PROJECT_NAME变量来读取每个项目的main.js入口文件，每个项目也要使用自己的html模版显示页面，所以需要配置如下图所示的项目html模版路径
（4）nginx.conf文件：这个文件主要配置项目部署之后的访问路径，部署在根目录下对原项目没有啥影响，但部署在二级目录下的项目，如果使用的是history路由模式，要将vue.config.js中的publicPath改为'./'，路由文件增加base参数，值为项目部署的二级路由，和nginx.conf中的二级路由保持一致，比如我当前的路由文件的base参数就应该设置为/model/
（5）Dockerfile文件：这个文件可以将我们相关文件复制到容器平台上面，这个文件无需特殊处理，和平常一样书写，放在最外层根目录即可
（6）上述步骤完成之后，直接部署流水线，容器部署就可以访问了
2、未使用.env区分环境情况
文件目录
使用.env区分环境的情况，主要和上面的不同是要将所有子项目的env文件全部提取到最外面的vue根目录下，package.json文件的构建脚本也是有所区别的
需要根据--mode参数来区分读取的env文件，其余和上面步骤一样。
