vue-cli2.x下的多环境打包

项目开发时，基本需要打多种环境的包：本地（开发本地运行，无需打包）、开发、测试、演示、生产。这里记录下以前项目在vue-cli2.0下怎么配置多环境打包。

如果帮助到了你，还请点个赞！！！！！

vue-cli3.0下的多环境打包，请参考我的另一篇文章：vue-cli3.0下多环境打包

创建vue-cli2.0项目

cd到项目文件夹，运行命令，创建项目

#	vue init webpack  obj-name   //项目名不可以大写

然后会出现一系列的询问，自行选择

Tips:

后面安装其他插件的话cnpm有时会出现莫名其妙的bug，可以使用重新指定 registry 命令解决npm安装缓慢的问题

#	npm install --registry=https://registry.npm.taobao.org

1、新增打包命令

我们在package.json在新增自定义打包命令

2、新增config配置文件

我们在config文件夹下新增配置文件，复制一份dev.env.js并修改，生产环境的也对应修改成这种

3、新增build下打包配置文件（两个）

我们可以复制build.js和webpack.prod.conf.js文件并修改

修改下webpack.testMy.conf.js文件

修改buildTestMy.js文件

4、在config文件夹下的index.js里面新增配置

复制一份build的配置并修改

assetsPublicPath要把原来的'/'修改成‘./’，不然打包后静态资源读取不到。

为了防止打包后css样式类文件的图片类丢失，我们可以在build/utils.js文件下增加publicPath:'../../',，如下：

到这里自定义的打包脚本就配置好了
下面我们要对接口地址做动态读取。打包相应环境的包，就调用相应的接口，很简单，在封装的公共api文件里面这样获取接口地址即可：

#	let baseUrl = process.env.SERV_ADDR

配置完之后，我们可以在readme里面写下备注，无论谁接手项目，都会很清晰

好了，最后我们来测试下打包

我们新增的test环境的包：

默认的生产环境的包：

我们可以看到，已经可以正常的打不同环境的包了：

ok，打包好了，下面我们在测试下不同的包下面，读取接口地址吧

我们修改下 config文件夹下的文件，写上不同的域名

然后在首页给打印出来

这是生产环境的：

ok，没问题，再来看自定义的环境的

ok，也没问题。

其他环境配置类似，不在赘述。

如果帮助到了你，还请点个赞！！！！！