Vue-cli 3 环境变量全部未定义

Question

我已经尝试了所有的解决方案，但似乎没有一个对我有用。我只想在我的 Vue 应用程序中的 .env 文件中存储一些值，但只是尝试记录 process.env 从组件内返回一个空对象。

我的 .env 文件

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

我的计划是将这些环境变量设置为数据属性，但它总是返回 undefined 。如果我从 webpack.config.js 执行 console.log(process.env.NODE_ENV) 它会表明我正在开发中，但是如果我尝试在组件中执行相同的操作，例如

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

它只是返回 undefined 。

原文由 Doolan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想通了 - 我必须安装 dotenv-webpack 并在 webpack.config.js 中初始化它，这很奇怪，因为没有文档说明我需要这样做。

原文由 Doolan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

给登陆这里的人的一些提示：

1. 确保您的 .env 文件 位于项目根文件夹 中（而不是说 src/ ）
2. 如果要静态嵌入到客户端包中 ，变量名称应以 VUE_APP_ 开头
3. 重新启动 开发服务器或构建您的项目以使更改生效
4. 如果您从基于 webpack 的解决方案迁移，请确保将 : （来自 JSON 配置）替换为 = （ dotenv 格式）。容易错过
5. 确保您已保存对 .env 文件的任何更改。
6. 在旧的 Vue 版本中，环境变量定义在例如 config/dev.env.js 而不是根目录中的 .env 文件中

原文由 M3RS 发布，翻译遵循 CC BY-SA 4.0 许可协议