前端自动化部署 Vue 配置生产环境、测试环境和开发环境到package.json，然后使用npm run 命令快速运行或打包，而不用每次都手动修改路径_npm run dev:test

项目背景： mpvue 微信小程序 

期望效果：直接运行npm run dev:test:wx ,就可以运行测试环境，而不用手动修改后台路径。

参考文章：https://segmentfault.com/a/1190000016664571

 

采用往前推的方法：

首先，我需要用npm run dev:test:wx的命令来快速运行前端测试环境。而且不希望每次手动去修改地址。

"dev:test:wx": "node build/test.js wx",　找到build文件夹，下面创建一个test.js文件，然后把dev-server.js文件复制到test.js​

然后修改test.js  --

var webpackConfig = require('./webpack.test.conf')

在build文件下新建webpack.test.conf.js，将webpack.prod.conf.js内容复制过来。
修改webpack.test.conf.js文件
将const env = require('../config/prod.env')；
修改为：const env = require('../config/test.env')；

在config文件下新建test.env.js，将prod.env.js内容复制过来；
分别在dev.env.js,(开发环境)test.env.js,（测试环境）prod.env.js（生产环境）中定义变量API_ROOT，

然后 在config 的index.js 文件中，module.exports中仿照dev 增加一个test， 把env: require('./test.env'), 地址改为config下面的test.env.js

最后改地址"dev:test:wx": "node build/test.js wx",  dev:test:wx 这个是你执行命令的口令，这个口令可以随便改，执行口令执行的文件就是build文件夹下面的test.js

最最后，你会好奇，哪里去获取我设置的地址呢？

就是你接口地址直接调用 process.env.API_ROOT ,因为process是全局的，所以你在所有地方都是能够调用这个地址的。比如main.js

 

如果要打包也是一样的，"build:test:wx": "node build/buildtest.js wx", ，然后在build文件夹下面建立buildtest.js文件，复制build文件夹下面的build.js文件过来，

把 var webpackConfig = require('./webpack.buildtest.conf') 改为buildtest.confi ，然后在build文件夹下面建立buildtest.conf.js文件，

把var env = config.buildtest.env 改为buildtest.env，然后在config文件夹下面的index文件夹module.exports中仿照dev 增加一个buildtest， 把env: require('./test.env'), test.env就是测试的打包地址啦。
 

 

最后如果是开发运行，测试地址 ：直接运行命令npm run dev:test:wx ,如果是打包直接运行build:test:wx