以vue为例，前端配置环境变量

为什么要配置环境变量？

一般项目分有开发环境、测试环境、正式环境，所使用的接口域名都是不同的，可能还分别部署三个或更多前端服务。每次切换环境或者打包的时候都需要手动更改配置，比较麻烦也容易出错，所以用脚本自动化方式直接配置不同的开发环境。

1.创建各环境文件

以vue为例，直接创建.env.xxxx，与src同级，xxxx后缀可以任意取

.env（本地开发环境）

// 用来区分本地开发和线上打包环境
NODE_ENV = 'development'
// 开发环境接口
VUE_APP_SERVER = 'http://www.xxxx.com'

.env.testing（测试环境）

// 用来区分本地开发和线上打包环境
NODE_ENV = 'testing'
// 测试环境接口
VUE_APP_SERVER = 'http://www.xxxx.com'

2.改写package.json中scripts

 "scripts": {
    "serve": "vue-cli-service serve",
    "serve-testing": "vue-cli-service serve --mode testing" ,
    "build": "npm run build",
    "build-testing": "vue-cli-service build --mode testing",
  }

想用本地环境接口，就npm run serve
想用测试环境接口，就npm run serve-testing

打包同理，正式环境也同理