javascript - 如何在不重建 React 应用程序镜像的情况下更新环境变量

Question

我正在构建一个 dockerized React 应用程序，需要为 API URL 定义一些环境变量。然而，React 在构建阶段注入(inject)了这些变量，所以每次环境变化时我都需要重建整个图像。这会减慢我的流程，因为我无法重复使用相同的应用程序图像进行认证和生产。

我已经搜索了一些模式，现在我正在使用 JS 配置文件动态注入(inject)环境，但它看起来不是很简单。有人知道处理这个问题的更好方法吗？

Answer 1

最近遇到了同样的问题，然后我发布了一些包:@import-meta-env/*到npm来解决问题。

此插件在特殊的 import.meta.env 对象上公开环境变量(深受 Vite 启发)。

在生产过程中，它将被静态地替换为占位符，而不是当前的环境变量。

因此我们可以在任何地方运行一个脚本来用系统中的环境变量填充文件。

您可以在 https://iendeavor.github.io/import-meta-env/ 查看更多信息.

我还创建了一个 Docker 示例:https://github.com/iendeavor/import-meta-env/tree/main/packages/examples/docker-starter-example .

希望对有需要的人有所帮助。