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。

Answer 1

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

Answer 2

如果您的vue-cli版本高于3.x并且您将.env文件放在根目录中，如评论中所述。你可以从组件访问你的环境变量（比如这个process.env.VUE_APP_YOUR_VARIABLE）。正如vue-cli docs所说

只有以VUE_APP_开头的变量才会静态嵌入到webpack.DefinePlugin的客户端包中。您可以在应用程序代码中访问它们：console.log(process.env.VUE_APP_SECRET)