最近项目比较紧，但是ui又没出，本来打算跟着原型先敲，结果瞥了一眼被咔嚓掉的上一版ui，溜了溜了，这特喵明明是两个项目啊，产品，你给我出来，我保证打不死你(ー`´ー)。

在等新ui的时候无聊，刚好想起之前vue-cli2.x开发时一直没配测试环境，刚好弄下吧，于是百度了，是的，有现成的我就抄现成的了，我就是这么偷懒，然后找了百度前几个测试了下，好吧，我觉得吧，自己写的才是最合适的。

为了通用性，我们用vue init webpack template_split创建一个全新的项目来弄它，项目名你们就别纠结了哈，我随便命名的。

一切都没动，ok，开始搞它！

首先，开发与正式环境都有了，那么就差测试了，正常来说测试环境和正式环境相差不大，而开发环境都是我们本地跑的，那么，测试应该参照正式的。

ok，复制config>prod.env.js，创建一个test.env.js，并修改环境为test。

然后参照build文件中也有dev和prod分开，那么我们也需要在这个文件中增加一个test，ok，复制build>webpack.prod.conf.js，创建一个webpack.test.conf.js，并修改文件中出现的prod单词，替换为test即可，基本只有一处，如果不放心可以页面内查询。

文件生成好了，那么就开始配置了，用了这么久的vue-cli，基本看一眼就知道这几个是基础文件

好吧，其实我是看里面的代码有涉及production判断知道要改的。

比如：build.js中：

额不好改，先放着

比如：utils.js中：

utils.js，一看就知道，改：

webpack.base.conf.js，一看就和utils.js是同一类，改：（如上图）

以及vue-loader.conf.js，改成这样：

好了，准备配置测试命令: npm run test，在package.json中改，

此时是看了build.js文件，偷懒不加判断，直接复制了一个，命名为test.build.js，修改内容如下图：

此时全部配置好，然后我配了个方法，用于校验打包后的各种环境，此方法是用于在测试环境时生成vconsole插件，vconsole插件用于移动端调试非常不错，可以打日志，看请求，差cookies等，具体方法这就不用我教了，只要在加载完后启动方法判断环境即可。

然后我跑下：npm run test， 可以

跑下：npm run build 和 npm run dev

另外附上vconsole工具的截图，对于移动端无法便捷查看日志等有几大的便利：