webpack2.7.0配置不同的打包环境

前言
在实际开发中，有很多需要根据不同环境配置不同的接口地址的情况，如果每回打包的时候都去改配置文件就超级麻烦，所以这边提供了一个自动化的方法，无需打包前修改配置文件就能实现根据不同环境调用不同接口。

步骤
1.修改package.json文件



备注：cross-env是跨平台地设置及使用环境变量的插件

2.修改build/build.js文件



此处设置node环境变量的语句注释掉，获取运行npm命令时设置的node环境变量

3.修改build/webpack.base.conf.js文件





4.修改build/vue-loader.conf.js





5.修改config/prod.env.js、config/dev.env.js、config/test.env.js



其中API_ROOT为你所调用的接口地址

6.在所需要的js中引用刚刚写的API_ROOT,写法如下

const apiUrl = process.env.API_ROOT;

以上就是配置不同打包环境的操作