dotenv-cli + vue3 添加环境配置文件

前提： 从文件中加载环境变量， 通过不同的npm 打包命令来实现设置不同的环境变量的方式。我们通过dotenv-cli 来实现， 本文以vue3为例。

1. 安装

npm install dotenv-cli -s

 2. 在项目根目录新建 .env开头的文件， 例如（.env, .env.production, .env.test 等）

我新建的是.env.production

#  dotenv-cli 配置环境变量， .env开头的文件存放在根目录，同时变量的前缀为 VUE_APP_ 例如： VUE_APP_XXX; 同时在package.json 中添加dotenv -e .env.production即可
VUE_APP_TEXT = static
VUE_APP_TEST = static

注意： 变量名的前缀为 VUE_APP_开头， 负责无法识别。

 3. 通过在package.json 的script中添加命令来运行

  "scripts": {
    "serve": "vue-cli-service serve",
    "serve-test": "dotenv -e .env.production vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

注意： dotenv -e 文件名 来运行， 后面加原本需要运行的命令即可。

然后就可以在项目中通过 process.env 来获取到所有的环境变量了。