azure - 如何将Azure App Service应用程序设置加载到VUE中？

Question

我们有一个作为 Azure 应用服务托管的 Vue 应用。在 Azure 门户中的“设置\配置”下，我们添加了 VUE_APP_API_ENDPOINT_URL 等应用程序设置。正如文档所解释的那样，它们成为环境变量，并且可以通过从门户打开控制台并输入“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#environment-variables

具体看这个:

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that could have the same name.

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

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

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

VUE_APP_API_ENDPOINT_URL=default_value

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