如何在客户端使用 create-react-app 跨应用程序设置环境变量答案

【问题标题】：How to set env variables across the app with create-react-app on the client side如何在客户端使用 create-react-app 跨应用程序设置环境变量
【发布时间】：2019-12-15 12:25:31
【问题描述】：

嘿，我有一个简单的 Todo 应用程序，客户端安装了create-react-app，服务器安装了node。我想在我的应用程序中设置env 变量，但我很困惑如何正确地做到这一点。

我已将我的.env 文件设置在应用程序的根目录中。

在.env 文件中只有REACT_APP_HOST=http://localhost:3000。

我想像这样在client 目录中显示它：

const { REACT_APP_HOST } = process.env;
console.log({ REACT_APP_HOST });

上面的代码显示undefined。整个process.env 是一个空对象。

我尝试将.env 移动到client 目录，然后它运行良好，但这不是我认为的重点。

如果我想在server 侧也使用.env 变量，如何正确执行？在我的情况下，我是否需要创建两个单独的 .env 文件来为客户端和服务器提供服务，或者 create-react-app 需要一些额外的配置才能由一个 .env 文件提供服务？

如果对这里有帮助，请留下我的 github repo。

【问题讨论】：

是的，您需要为您的服务器和您已经设置的客户端创建一个 .env。
我的示例 mern 应用程序 github.com/EliHood/ReactExpressPhotoShareApp，它使用 .env 文件作为服务器和客户端文件夹。希望这会有所帮助。

标签： javascript node.js reactjs environment-variables create-react-app

【解决方案1】：

在应用程序的根目录中创建一个.env 文件（与src 相同级别）：
```
REACT_APP_API = http://XX.XX.XXX.XXX:XXXX
```

就是这样，通过使用REACT_APP 前缀命名变量，您甚至不需要使用dotenv.require()。现在REACT_APP_API 可以在process.env.REACT_APP_API 获得

【讨论】：

嗯...我不明白您为什么将client 目录称为我的应用程序的根目录而不是mern-todo-app 目录。

【解决方案2】：

您必须创建两个 .env 文件。一个在客户端，另一个在服务器中（如果需要）。
您不需要为客户端设置任何其他配置。如果使用 create-react-app 完成，默认情况下客户端目录支持 .env。您可以通过@custom .env获得更多信息
如果您需要使用 .env 作为服务器。在服务器文件夹中创建 .env。添加 dotenv 模块。您必须按照此链接的说明进行操作。 dotenv doc

【讨论】：

感谢您提供明确的解决方案。它可以工作，但是有没有办法在客户端和服务器之间共享一个 .env 文件？如果可能，哪种做法更常见？将其放在一个文件中还是将其分开？

【解决方案3】：

对，你必须在我们项目的根目录下创建一个.env 文件。也许它会和src 处于同一级别。

请注意此链接。 https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

【讨论】：