修改vue-cli2的webpack环境，增加一个数据模拟dev及多个不同的build地址

前篇文章 2020年，《深入浅出Webpack》（吴浩麟2018/01）学习总结

我写了学习webpack的目的和过程，正所谓程序员的价值，往往通过他写的代码带给社会的价值来体现。那么这篇文章，我就结合自己目前所做的项目，介绍如何在修改更少代码的情况下建立多个开发环境及多个生产环境。

前言

业务需求背景：笔者所服役的公司是一个小型外包，前后端并行开发，团队都是按项目情况从公司其他地方的员工分配过来的人员，默契不算太高，连产品经理都是其他公司的人员。

使用的是vue-cli2.9的模认模版，(vue-cli2之前的模板都还是用了原生的webpack,现在最新的vue-cli3、vue-cli4都是用了vue团队做的插件来布置工作环境，有很多配置不但要懂webpack,还要去学习vue-cli了。）

需求：新建立一个用于mock数据模拟的dev环境，修改build打包异步请求的地址，建立5个不同的打包地址，以供甲方不同部门的审查，并且开发环境与生产环境的NODE_ENV值不变，还分别是development、production

项目开发完成度已接近70%,不宜修改过多的业务代码，并且前端是多人开发，新环境应新增启动命令，而不是用旧命令去执行新功能。

设计

1. dev环境设计

项目处于一边开发，一边对接接口，这是由于很多数据由甲方提供模型，再由后端同事处理返回（同时，测试也是用后端的测试数据）个别接口数据后端开发比前端快，前端用devServer，跟据返回数据再开发而无需使用mock模拟。如遇后端还没有提供接口的请况，则启用mock模拟的环境

npm run dev //运行普通dev环境，可用于对接现有接口
npm run dev:mock //运行专门的mock模拟环境

2. production环境设计

由于项目经常要打包多个不同的axios.baseUrl地址发给不同的人（本公司项目负责人，甲方测试，甲方测试2，甲方的甲方服务地址（所以我其实是乙方的乙方的乙方）共有5个地）

分别运行不同的地址，打包到不同的文件夹。

npm run build //普通打包，以放代码其他人接手后不看文档
npm run build:none //打包地址寻打当前服务器目录 => '/'
npm run build:193  //打包为http://193.xxx.xx.xxx:8080/xxx/xx
npm run build:192  //打包为http://192.xxx.xx.xxx:8080/xxx/xx
npm run build:113  //打包为http://113.xxx.xx.xxx:8080/xxx/xx
npm run build:10  //打包为http://10.xxx.xx.xxx:8080/xxx/xx

然后，最后的包分别放在项目跟目录下的: dist 、dist-none、dist-193、dist-192、dist-113、dist-10

开始

1. Development的修改

根据上一篇文章对webpack的学习( 2020年，《深入浅出Webpack》（吴浩麟2018/01）