Question

我已经建立了反应应用网页带有自定义环境变量的
问题是当我构建脚本时并更改.env变量，网站上没有任何变化！

.env文件：

REACT_APP_SITENAME=TheSiteName App

Answer 1

从文档中引用：

环境变量是在构建期间嵌入的。

不可能将环境更改作为运行时应用。

Reference

这里是如何在运行时使用环境的示例：

CodeSandbox

Answer 2

构建React应用后，所有代码都是静态的，无法更改。我认为向动态应用发送一些动态数据的唯一解决方案是在运行应用的系统上为每个系统创建一个特殊文件，然后直接将其加载到index.html中，或者动态创建该文件的内容。因此，当您在public / index.html中使用create-react-app时，请添加以下内容：

<head>
...
<script src="https://www.example.com/envconfig.js" type="text/javascript"/>
...
</head>

此文件应包含环境配置，例如：

window.globalConfig = {
    siteName: "The Sitename App"
}

也可以通过PHP，Java或任何其他后端服务动态创建文件。只需确保以有效的Java脚本回答即可。

并且在您的React应用中的index.js，App.js或任何您可以访问此变量的地方，因为它是全局的：

   const appConfig = window.globalConfig || { siteName: process.env.REACT_APP_SITENAME}

如果globalConfig不可用（可能正在开发中），您可以使用静态env配置。现在，您可以以任何方式使用appConfig，并通过redux，上下文或属性将其提供给组件。

最后要提到的是，您必须在执行所有React代码之前确保已加载配置文件。因此，应在所有创建的React文件之前加载该文件。

构建完成后如何编辑.env文件

2 个答案: