如何将 Azure 应用服务应用程序设置加载到 VUE 中？

Question

我们有一个作为 Azure 应用服务托管的 Vue 应用。在 Azure 门户的 Settings\Configuration 下，我们添加了 VUE_APP_API_ENDPOINT_URL 等应用程序设置。这些变成了文档解释的环境变量，可以通过从门户打开控制台并输入“env”来验证。

我曾希望这些 env 变量现在可以通过使用在 Vue 内部访问

process.env.VUE_APP_API_ENDPOINT_URL

我的猜测是它只有在使用 WebPack 或类似工具构建应用程序时才在 VUE 中可用。至少它不起作用。

有什么好的方法可以将那些从 Azure 应用设置创建的环境变量读取到 vue 应用中吗？有些人提到 dotenv npm 包，但我们需要读取 env 变量而不是从配置文件中添加它们。

Answer 1

您是正确的，环境变量仅在构建应用程序时才可用。为了详细说明这一点，只有您在构建时指定/提供的环境变量才可以根据此处的文档在构建过程中在应用程序中可用： https: //cli.vuejs.org/guide/mode -and-env.html#环境变量

具体看这个：

请注意，只有 NODE_ENV、BASE_URL 和以 VUE_APP_ 开头的变量才会通过 webpack.DefinePlugin 静态嵌入到客户端包中。这是为了避免意外暴露机器上可能具有相同名称的私钥。

我正在努力完成与您想要完成的基本相同的事情。我试图从 Azure 的应用程序设置中获取一个值，以便我可以为我的应用程序设置多个环境，而不必根据我将应用程序发布到的环境不断更改值。

在意识到您可能会做某事并阅读文档中的确认后，我决定尝试将从 Azure 的应用程序设置中获取的环境变量放入具有默认值的 .env 文件中，以便指定它在构建时。然后我将我的应用程序发布到 Azure 并对其进行了测试，它成功了！

尝试使用您尝试使用默认值或其他内容设置的所有 Azure 应用程序设置创建 .env 文件，例如：

VUE_APP_API_ENDPOINT_URL=default_value

然后使用正确的值将这些相同的变量设置到 Azure 应用程序设置中，它应该可以工作。