在 Vue.js 中使用环境变量

Question

我一直在阅读官方文档，但在环境变量中找不到任何内容。显然有一些支持环境变量的社区项目，但这对我来说可能有点矫枉过正。所以我想知道在处理已经使用 Vue CLI 创建的项目时，是否有一些简单的开箱即用的东西可以在本地工作。

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

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

我对 env 变量和 Node.js 有点陌生。

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

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

Answer 1

带有 Webpack 的 Vue.js

如果您将 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

如下评论所述： 如果您使用的是 Vue cli 3，则只会加载以 VUEAPP 开头的变量。

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

Vue.js 与 Vite

Vite 在特殊的 import.meta.env 对象上公开了以 VITE_ 开头的 env 变量。

您的 .env 应如下所示：

 VITE_API_ENDPOINT=value
VITE_API_KEY=value

这些变量可以在 import.meta.env.VITE_API_ENDPOINT 和 import.meta.env.VITE_API_KEY 下的 Vue.js 组件或 JavaScript 文件中访问。

提示： 当您在 .env 文件中更改或添加变量（如果它正在运行）时，请记住重新启动您的开发服务器。

有关更多信息，请参阅 env variables 的 Vite 文档。

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

Answer 2

如果您使用的是 Vue cli 3，则只会加载以 VUEAPP 开头的变量。

在根目录中创建一个 .env 文件：

 VUE_APP_ENV_VARIABLE=value

而且，如果它正在运行，您需要重新启动 服务 以便加载新的环境变量。

这样，您就可以在项目（.js 和 .vue 文件）中使用 process.env.VUE_APP_ENV_VARIABLE。

更新

根据 @ali6p 的说法，使用 Vue Cli 3 不需要安装 dotenv 依赖项。

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