1.了解环境变量概念
我们可以根目录中的下列文件来指定环境变量:
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
我们可以根目录中的下列文件来指定环境变量（ 只有VUE_APP_开头的环境变量可以在项目代码中直接使用）:
NODE_ENV = production
VUE_APP_URL = test
VUE_APP_BASEAPIURL=http: //testapi.com
VUE_APP_IMG_BASE_URL=http: //file.com
除了 自定义的VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
- NODE_ENV - 会是 “development”、“production” 或 “test”
- 中的一个。具体的值取决于应用运行的模式。
- BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
模式概念:
模式是 Vue CLI 项目中一个重要的概念。一般情况下 Vue CLI 项目有三个默认模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
模式不等同于 NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都将 NODE_ENV的值设置为模式的名称(可重新赋值更改)——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。
你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。
2. 分别定义.env , .env.test , .env.prod文件 （.env.[mode] mode可以自定义）
.env文件配置
NODE_ENV = development
VUE_APP_BASE_API = http://devapi.com
VUE_APP_IMG_BASE_URL = http://xxx.com/
VUE_APP_PUBLIC_KEY = xxxxxxxx
.env.test文件配置
NODE_ENV = production
VUE_APP_URL = test
VUE_APP_BASE_API = http://testapi.com
VUE_APP_IMG_BASE_URL = http://xxx.com/
VUE_APP_PUBLIC_KEY = xxxxxxxx
.env.prod文件配置
NODE_ENV = production
VUE_APP_URL = prod
VUE_APP_BASE_API = http://prodapi.com
VUE_APP_IMG_BASE_URL = http://xxx.com/
VUE_APP_PUBLIC_KEY = xxxxxxxx
2. 修改package.json文件
"scripts": {
"serve": "vue-cli-service serve",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},