vue.js - 应用程序由 Amplify 提供服务时未定义的应用程序环境变量

我有一个由 AWS Amplify 托管的 Vue.js 应用程序。

在 Vue 中，可以使用 .env 在应用程序范围内设置环境变量。文件。我目前将此类文件用于开发和生产模式，包含不同的值。在本地构建和服务我的应用程序时，上述工作按预期工作。但是，一旦 Amplify 部署了我的应用程序（在我的例子中，我使用 Amplify 的 CD 功能），这些变量就没有定义。

我知道我可以在 Amplify 中定义相同的环境变量，但这意味着我需要在两个地方管理这些值，因为在开发时不会重新部署。所以这似乎很容易出错（例如，当我需要进行更改时，我需要记住在应用程序端和放大控制台上更新变量）。

我想知道这种行为是否是预期的，或者我的设置中是否缺少某些东西。

谢谢！

标签： vue.jsaws-amplify

我在我的 React 应用程序中也遇到了同样的问题。
问题是，您需要.env在您的应用程序中有一个包含所有环境变量的文件。

为什么？— 其背后的原因是，它会生成静态 HTML、CSS 和 JS 文件。process这些文件在运行时无法访问。

在 Amplify 中添加所有环境变量后，您必须build在App build specification.

你可以参考这个官方文档来了解如何实现它。

如果你不太关心你的环境变量，你可以使用这个 hack: printenv。这会将您的操作系统和应用程序的所有环境变量存储在.env文件中。

我的配置看起来像这样：

build:
      commands:
        - 'printenv >> .env'
        - 'npm run build'