vue根据不同指令配置环境变量

1、基于vue-cli-service模块来进行环境的配置
当执行 vue-cli-service [参数] 会执行打包文件，根据参数的不同会去读取指定的文件，传入不同的环境变量

默认的环境变量配置文件

.env 全局默认配置文件，无论什么环境都会进行加载合并

.env.development 开发环境下的配置文件 对应的指令 vue-cli-service serve

.env.huaweitest 为华为云的测试环境下的配置文件 对应的指令 serve:huaweitest

 

.env.production 生产环境下的配置文件 对应的指令 vue-cli-service build

自定义的环境变量配置文件

我们除了用默认的dev文件外还可以进行文件的自定义

（一）生产环境下的自定义配置文件

1，.env.自定义名  执行指令  vue-cli-service build --mode 自定义名
开发环境下的自定义配置文件

2，.env.自定义名  执行指令  vue-cli-service serve --mode[自定义名
vue-cli-service serve --mode text 这个指令执行的文件是 .env.text ，所以文件名与指令–mode后面的参数要一致，这样指令才能成功找到源文件提取环境变量

（二）开发环境下的配置

1，.env.[自定义名]   执行指令  vue-cli-service serve --mode 自定义名

2，vue-cli-service serve --mode text 这个指令执行的文件是 .env.text ，所以文件名与指令–mode后面的参数要一致，这样指令才能成功找到源文件提取环境变量

3，.dev文件的环境变量配置
NODE_ENV = text //用于标记环境名

ENV = '测试环境'  //仅做阅读源码的标识，他并不会被提取到process.env对象中

# title  //注释标记
VUE_APP_TITLE = '这是text的测试环境'  //添加自定义的环境变量

（三）Vue CLI 的 env 文件中定义的环境变量不生效的问题

1，Vue CLI 的 env 文件中定义的环境变量不生效的问题
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

NODE_ENV - 会是 “development”、“production” 或 [自定义] 中的一个

BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

因此如果想要自定义的环境变量生效，需要在开头加上VUE_APP_

4、环境变量的获取
process.env获取环境变量集合

process.env.VUE_APP_TITLE 获取环境变量集合中的添加属性