用 .env 反应环境变量答案

【问题标题】：React env variables with .env用 .env 反应环境变量
【发布时间】：2017-11-07 10:16:17
【问题描述】：

我正在尝试关注有关从 react-create-app 添加环境变量的文档，但没有成功：

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

在文档的根目录内我有一个“.env”文件（默认 .env 属性）
.env 文件只包含一个变量'REACT_APP_API_HOST=http://localhost:8080'
尝试访问我的应用程序中的 process.env（使用 create react app 创建）给我未定义

这是我尝试访问 process.env 的 app.js，但没有成功。

我无法访问代码中的 process.env。有没有关于如何做到这一点的工作示例？

【问题讨论】：

您的路径中是否定义了 NODE_ENV？
否，但 .env 已定义为默认值。
啊奇怪！您是否可以通过将 process.env 导出到 bash 配置文件中来访问任何其他变量？
你能分享你的代码吗？
添加新的.env 变量后，确保重启yarn。此外，您的自定义 .env 变量应以 REACT_APP_ 开头

标签： reactjs environment-variables create-react-app

【解决方案1】：

您可以在 root 上使用 .env 文件。

start: react-scripts start - 使用 .env.development
build_staging: "set REACT_APP_ENV=staging & react-scripts build" - 使用 .env.staging
build: "react-scripts build" - 使用 .env.production

【讨论】：

【解决方案2】：

在您的 package.json 中，您最终必须在启动脚本中添加 NODE_ENV=development。例如。 NODE_ENV=development && node scripts/start.js 用于弹出的 create-react-app 和 NODE_ENV=development react-scripts start 用于未弹出的。

编辑：显然NODE_ENV=development 不是必需的，因为在您运行start 或build 脚本时它已经被硬编码。根据文档，您的自定义环境变量应该具有以下格式REACT_APP*，就像您已经完成的那样。

sn-p 会很有帮助。

【讨论】：

问题是我试图在调试模式下通过观察变量来读取它。由于某种原因，它不起作用。只需通过控制台记录它，它就可以工作。