vue根据不同指令配置环境变量 结合vue-cli-service模块

环境变量模块

将不同的测试环境、开发环境文件存储不同的配置，来实现不同的操作，在不同的环境下变量变为baseURL，如axios的baseURL的配置

1、基于vue-cli-service模块来进行环境的配置

当执行 vue-cli-service [参数] 会执行打包文件，根据参数的不同会去读取指定的文件，传入不同的环境变量

默认的环境变量配置文件

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

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

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

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

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

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

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

开发环境下的自定义配置文件

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

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

2、 .dev文件的环境变量配置

NODE_ENV = study  //用于标记环境名

ENV = '学习使用'  //仅做阅读源码的标识，他并不会被提取到process.env对象中

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

...

3、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 获取环境变量集合中的添加属性