在 Vue.js 中使用环境变量

小编典典

在 Vue.js 中使用环境变量

all

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

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

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

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

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

阅读 99

2022-08-20

共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，则只会加载以 VUE_APP_ 开头的变量。

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

Vue.js 与 Vite

VITE_Vite 公开了以特殊import.meta.env对象开头的 env 变量。

您的 .env 应如下所示：

VITE_API_ENDPOINT=value
VITE_API_KEY=value

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

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

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

2022-08-20