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

IT技术 javascript reactjs
2021-05-18 16:25:09

我已经使用自定义环境变量
构建了 React应用程序网页,问题是当我构建脚本并更改 .env 变量时,网站没有任何变化!

.env 文件 :

REACT_APP_SITENAME=TheSiteName App

2个回答

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

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

该文件应包含环境配置,例如:

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

该文件也可以通过 PHP、Java 或任何其他后端服务即时创建。只要确保回答为有效的 Javascript。

在你的 React 应用程序中 index.js、App.js 或任何你可以访问这个变量的地方,因为它是全局的:

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

有了这个,如果globalConfig不可用(可能在开发中),您就可以回退到静态 env 配置现在,您可以以任何方式使用 appConfig,并通过 redux、上下文或属性将其提供给您的组件。

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

来自文档的引用:

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

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

参考

以下是如何在运行时使用环境的示例:

代码沙盒