vue.js - Vue.js、GitHub、Heroku - 如何动态、安全地设置环境变量？

Question

我有一个用 Vue.js 编写的应用程序，源代码存储在 GitHub 中。我还将该源代码连接到 Heroku 中的管道。我试图弄清楚如何使用此设置最好地安全地管理环境变量。

目前，我在我的 Vue 应用程序中使用.env.local、.env.dev和.env.prod文件来管理环境变量。但是，我需要能够在其他地方管理其中一些设置，例如我不希望在客户端可见/可访问的键。我曾尝试使用 Heroku 的环境变量设置，但我的 Vue 应用程序似乎无法访问或确认这些设置，我认为这是有道理的。我只是不确定从这里去哪里。这似乎是一个非常基本的问题，以前必须有人解决过。

编辑：我用 prfixing 我的变量VUE_APP_，例如VUE_APP_API. 然后我通过以下语法在应用程序中访问该值：process.env.VUE_APP_API.

标签： vue.jsgithubherokuenvironment-variables

Answer 1

您可以使用库dotenv从单个.env文件加载环境变量。

您可以在名为的文件中定义您的环境变量.env

VUE_APP_SOME_VAR=someVARvalue
VUE_APP_SOME_OTHER_VAR=someOTHERVARValue

.env然后你可以从像这样的任何文件中加载这些变量

require('dotenv').config()

//...
//...

process.env.VUE_APP_SOME_VAR

//...
//...

你可以在这里了解更多

此外，您不应将.env文件提交到版本控制软件，因为它可能包含敏感的身份验证密钥。您可以通过在应用程序设置页面中设置配置变量来配置 Heroku 以使用相同的环境变量。