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

Taw*_*d 4 javascript reactjs

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

.env 文件 :

REACT_APP_SITENAME=TheSiteName App

Aus*_*chs 15

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

<head>
...
<script src="https://www.example.com/envconfig.js" type="text/javascript">
</script>
...
</head>
Run Code Online (Sandbox Code Playgroud)

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

window.globalConfig = {
    siteName: "The Sitename App"
}
Run Code Online (Sandbox Code Playgroud)

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

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

   const appConfig = window.globalConfig || { siteName: process.env.REACT_APP_SITENAME}   
Run Code Online (Sandbox Code Playgroud)

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

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

  • thaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaannnnnnnkkkkkkkk youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu其工作 (4认同)