将.env文件添加到React项目中不起作用。

Question

3

我正在尝试添加.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

我无法访问它。

我的React脚手架使用：

cross-env  NODE_ENV=development

在启动命令中。

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

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

- Nilay Singh

执行 process.env.REACT_APP_SECRET_NAME - 0xAnon

尝试过但没有起作用。 - Nilay Singh

这可能会对您有所帮助 https://github.com/react-boilerplate/react-boilerplate/issues/1250 - 0xAnon

4个回答

0

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

%REACT_APP_SECRET_NAME%

- JSEvgeny

不，我正在尝试访问组件内部。 - Nilay Singh

从你提到的答案中，你尝试安装 dotenv 包并将其导入到你的组件中了吗？ - JSEvgeny

0

看起来你正在查看两种类型的React起始程序：

它们不是一样的。我不了解React Boilerplate，但不确定它们是否像Create React App一样提供.env文件的相同环境变量策略。

也许可以查看dotenv Node package，然后将其添加到您的项目中。我认为（不是100%确定）Create React App使用相同的策略。

- dumazy

在 package.json 文件中，他们使用了以下代码：（"start": "cross-env NODE_ENV=development node server"），他们正在使用 cross-env。 - Nilay Singh

0

看起来你已经做得很好了。只需记得每次更改.env文件中的信息后重新启动开发服务器。

此外，你的.env文件需要位于React应用程序的根目录中。你可以在React文档 - 在.env中添加开发环境变量中找到所有这些信息。

- IIX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vidu.sh · Accepted Answer

以下来自React Boilerplate的问题似乎提供了可行的解决方案：

  {
    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"
  }