当前位置: 首页 > 工具软件 > dotenv > 使用案例 >

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

羊舌诚
2023-12-01

前提: 从文件中加载环境变量, 通过不同的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 来获取到所有的环境变量了。

 类似资料: