由于工程中请求的 apiServer 可能有多个地址，所以不能简单设置 baseUrl，必须设置多个全局变量
1.在 vue.config.js 的同级新建文件
新建文件.png
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
所有环境 .env
开发环境 .env.development
生产环境 .env.production
以上三个命名不能变动，除此之外，可以另外自定义加上 .env.test 文件，也就是测试环境，或者 .env.beta，也就是公测，等等…
则还需要在 package.json 中做对应设置
测试环境 .env.test
公测环境 .env.beta
2.编写文件，设置变量
注意，全局变量仅除 NODE_ENV 和 BASE_URL 这两个保留变量外，其余自定义变量都需使用 VUE_APP_ 开头
NODE_ENV = 'development'
BASE_URL = ''
VUE_APP_URL = 'http://development.api.com'
VUE_APP_STRING = '哈哈'
VUE_APP_NUMBER = 123
3.在工程中使用
使用时 process.env.变量名 即可
console.log(process.env.VUE_APP_URL ) // http://development.api.com
开发环境：创建 .env.development 文件，同时配置 .env.development 和 .env 同时存在，系统默认访问 .env.development
生产环境：创建 .env.production 文件；配置好了 .env.production 后使用 build，系统默认访问 .env.production 里面的全局变量
注意：
1.改变一次全局变量后。就需要重新 npm run serve 启动一次，否则无法生效
2.文件里使用 # 注释
注意.png
4.环境变量分发
开发环境.png
测试环境.png
正式环境.png
vue.config.js 文件修改
module.exports = {
outputDir: process.env.outputDir,
// 如果使用代理，则设置 target 地址，如果没有使用代理，设置 axios 的 baseUrl
proxy: {
'/api': {
/* 目标代理服务器地址 */
target: process.env.VUE_APP_URL,
/* WebSocket */
ws: true,
/* 允许跨域 */
changeOrigin: true,
/* 路径重写 */
pathRewrite: {
'^/api' : ''
}
}
},
};
package.json 文件修改
"scripts": {
// "serve": "vue-cli-service serve",
// "build": "vue-cli-service build",
"serve": "vue-cli-service serve --mode development",
"serve:test": "vue-cli-service serve --mode test",
"serve:production": "vue-cli-service serve --mode production",
"build": "vue-cli-service build --mode development",
"build:test": "vue-cli-service build --mode test",
"build:production": "vue-cli-service build --mode production",
"build:tp": "vue-cli-service build --mode test && vue-cli-service build --mode production"
},
