如何在客户端使用 create-react-app 设置整个应用程序的环境变量

Question

嘿，我有一个简单的 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目录，然后它运行良好，但这不是我认为的重点。

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

如果它对你有帮助，你可以拥有我的github repo。

Answer 1

• 在应用程序的根目录中创建一个.env文件（与 相同级别src）：

  REACT_APP_API = http://XX.XX.XXX.XXX:XXXX
  

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