在Vue.js中使用环境变量

一尘不染

在Vue.js中使用环境变量

node.js

我一直在阅读官方文档，但无法找到有关环境变量的任何信息。显然，有一些社区项目支持环境变量，但这对我来说可能是过大了。所以我想知道在使用Vue
CLI创建的项目上是否有一些简单的开箱即用的功能可以正常工作。

例如，我可以看到，如果执行以下操作，则会打印出正确的环境，这意味着已经设置好了吗？

mounted() {
  console.log(process.env.ROOT_API)
}

我对环境变量和Node有点陌生。

仅供参考，使用Vue CLI 3.0 beta版。

阅读 700

2020-07-07

共1个答案

一尘不染

如果将vue cli与Webpack模板一起使用（默认配置），则可以创建环境变量并将其添加到.env文件。

这些变量将自动process.env.variableName在您的项目下访问。加载的变量也可用于所有vue-cli-service命令，插件和依赖项。

您有一些选择，来自环境变量和模式文档：

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

您的.env文件应如下所示：

VUE_APP_MY_ENV_VARIABLE=value
VUE_APP_ANOTHER_VARIABLE=value

据我了解，您所需要做的就是创建.env文件并添加变量，然后就可以开始了！:)

如以下注释中所述： 如果您使用的是Vue cli 3，则只会加载以 VUE_APP_ 开头的变量。

如果服务当前正在运行，请不要忘记重新启动它。

2020-07-07