node.js - 在 Vue.js 中使用环境变量

Question

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

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

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

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

仅供引用，使用 Vue CLI 3.0 beta 版。

Answer 1

Vue.js 与 Webpack

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

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

您有几个选择，这是来自 Environment Variables and Modes documentation :

.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_ 开头的变量。

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

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 文件中更改或添加变量(如果它正在运行)，请记住重新启动您的开发服务器。

更多信息，请查看Vite documentation for env variables .