将 .env 文件添加到 React Project 不起作用答案

【问题标题】：Adding an .env file to React Project not working将 .env 文件添加到 React Project 不起作用
【发布时间】：2020-04-17 05:59:38
【问题描述】：

我正在尝试添加.env 文件和变量，但我无法访问任何变量。我正在使用React Biolerplate Code。

我正在关注这个React Docs File。

我在我的根文件夹中添加了一个.env 文件，如下所示：

REACT_APP_SECRET_NAME=secretvaluehere123

我正在尝试使用此代码访问它：

<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>

我将 NODE_ENV 作为开发，但是当我尝试访问时：

 REACT_APP_SECRET_NAME

我无法访问它。

我的反应样板正在使用：

cross-env  NODE_ENV=development

在启动命令中。

我从 package.json 中删除了 (cross-env NODE_ENV=development) 但它不起作用。我尝试了这个答案的解决方案：Possible answer。

根据React Docs 它应该可以工作。我想为本地添加 api_url，它应该是 x，而对于生产，它应该是 y：

【问题讨论】：

【解决方案1】：

来自 React Boilerplate 的以下 issue 似乎提出了一个可行的解决方案：

  {
    start: "cross-env NODE_ENV=development env-cmd node server"
  }

如果您的 .env 像您所说的那样位于根文件夹中，这应该可以工作。否则，您可以通过这样做指定 .env 的路径

  {
    start: "cross-env NODE_ENV=development env-cmd -f ./custom/path/.env node server"
  }

【讨论】：

不工作我收到错误：> cross-env NODE_ENV=development env-cmd .env node server spawn .env ENOENT
是否可以在您的问题中显示您的项目文件结构？
我已经通过在文档中挖掘更多内容来更新我的答案，你能检查它现在是否有效吗？
这只是一个反应样板代码，我在反应样板的根目录中添加 .env 文件。

【解决方案2】：

我假设您正在尝试访问 index.html 中的 .env 变量，如果是这样，那么语法与 render 函数中的语法有点不同。尝试像这样访问它。

%REACT_APP_SECRET_NAME%

【讨论】：

【解决方案3】：

看起来您正在查看两种类型的 React 启动器：

这些不一样。我不知道 React Boilerplate，但我不确定它们是否提供与 Create React App 一样的 .env 文件的环境变量策略。

也许看看dotenv Node package，也许你可以将它添加到你的项目中。我认为（不是 100% 肯定）Create React App 使用的是同一个。

【讨论】：

在 package.json 他们使用的是：( "start": "cross-env NODE_ENV=development node server",) 他们使用的是cross-env

【解决方案4】：

看来您一切正常。每次更改 .env 文件中的信息时，请记住重新启动开发服务器。

此外，您的 .env 文件需要位于您的 react 应用程序的根目录中。您可以在React Docs - Adding Development Environment Variables In .env中找到所有这些信息

【讨论】：