VUE CLI环境变量的使用

模式

默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我们可以通过 --mode 选项修改命令行默认的模式，如：

vue-cli-service build --mode development

环境文件

所有的环境变量都从对应的环境文件中载入。环境文件放置在根目录下，并且对应的命名为

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

环境变量

环境变量有三类

NODE_ENV：默认为模式

BASE_URL：和vue.config.js 中的 publicPath 选项相符，即应用部署的基础路径

VUE_APP_* ：自定义的变量，需要以VUE_APP开头

对于环境变量的使用，直接通过process.env.*获取即可。

注意：对于环境变量的改变，需要重调命令才能生效

参考

官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F