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

Question

我有一个用Vue.js编写的应用程序，源代码存储在GitHub中。我也将源代码连接到Heroku中的管道。我正在尝试找出如何通过此设置最佳地安全地管理环境变量。

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

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

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

//...
//...

您可以了解更多here

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