@vue-cli2.X,3.X,4.X打包时开发环境、测试环境、生成环境配置

@vue-cli2.X,3.X,4.X打包时开发环境、测试环境、生成环境配置

前言：

这篇文章主要是总结一下vue-cli各个版本打包时如何区分开发环境、测试环境和生产环境，主要为不懂的提供参考。

为什么要配置环境：

为什么要配置环境？这是因为在实际开发中公司需要做数据隔离，需要把开发环境、测试环境、生成环境的数据相互隔离开，防止数据污染。还有一点就是各个环境之间不会互相影响，这样可以提高团队的效率。

开发环境：简单理解就是程序员开发代码时需要运行的环境，包括了自测、预览的环境，一般这个环境只有开发者自己在使用。

测试环境：这个环境主要就是开发者功能开发完成后，更新到另外一个环境上让测试同事进行测试的，日常开发时通常一个功能开发完毕后才会更新到这个环境上。

生成环境：这个环境也叫线上环境，主要是给用户使用的，通常是定期更新的（前提是更新的内容测试通过），偶尔出现线上bug后也会紧急再更新。

好，说完各个环境后就直接开始配置吧！！

vue-cli2.X

在2.X中配置环境可以通过cross-env库来进行环境区分，配置也很简单，先安装

npm install --save-dev cross-env

vue-cli3.X和vue-cli4.X

这两个版本可以采用同一种方式配置。

1. 在项目根目录下创建各环境对应的文件.env.development .env.production .env.test
   

2. 在对应的文件内进行环境变量配置
   
   这里要注意NODE_ENV是用来定义当前环境的字段，VUE_APP_BASE_URL是用来定义接口前缀的，这里如果是要在vue中使用环境变量需要增加VUE_APP前缀，否则在vue中无法获取环境变量

3. 在package.json中配置各环境的打包命令
   
   注意这里的mode字段后的值，它会去根目录下找以.env为前缀的环境文件，所以.env.后面的名称要与mode字段后的值一致否则无法找到相关配置

4. 然后就可以根据不同环境执行不同的代码了

！！！如果对你有用请留下一个赞再走吧！！！