我已经使用自定义环境变量
构建了 React应用程序网页,问题是当我构建脚本并更改 .env 变量时,网站没有任何变化!
.env
文件 :
REACT_APP_SITENAME=TheSiteName App
我已经使用自定义环境变量
构建了 React应用程序网页,问题是当我构建脚本并更改 .env 变量时,网站没有任何变化!
.env
文件 :
REACT_APP_SITENAME=TheSiteName App
构建 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 文件之前加载。