关于Vue Cli 环境变量的配置笔记

Vue Cli 项目有三种模式

• development ：开发模式，默认选择，用于 vue-cli-service serve
• test ：测试模式，用于 vue-cli-sercive test:unit
• production: 生产模式，用于 vue-cli-service build 和 vue-cli-service test:e2e

我们可以通过传递 --mode 选项参数为命令行覆写默认的模式。

vue-cli-service build --mode development
// or
vue-cli-service build --mode production

环境变量

我们可以在项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

环境文件加载优先级
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

1.定义环境变量

在环境文件中使用键值对的形式定义变量

VUE_APP_TEST = 'Hello World!!!'

注意: 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

2.使用环境变量

通过 proess.env. 获取对应环境的环境变量

console.log('process.env',process.env)
console.log('process.env.NODE_ENV',process.env.NODE_ENV)
console.log('process.env.TEST',process.env.VUE_APP_TEST)

也可以在 vue.config.js 中对环境变量进行修改

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {

}