Question

我正在开发此React应用，并考虑在其中添加一些环境变量，这就是我所做的：

安装了最新版本的react-scripts
在根文件夹（node_modules文件夹所在的位置）上添加了.env文件
添加了REACT_APP_OTHER_OTHER_THAD = asdfas只是为了测试变量

REACT_APP_OTHER_OTHER_THING=asdfas

在其中打开index.js和console.log（process.env.REACT_APP_OTHER_OTHER_THING）以查看输出

import React from 'react';
import Reactdom from 'react-dom';
import App from './App';

console.log(process.env.REACT_APP_OTHER_OTHER_THING, 'DOTENV')

Reactdom.render(<App/>, document.getElementById("app"))

然后我重建了应用程序并启动了应用程序以查看结果但随后会给出undefined作为process.env.REACT_APP_OTHER_OTHER_THING的输出。然后，我尝试打印process.env.NODE_ENV（正在运行，并将“开发”打印为输出）。

注意：我也尝试按照https://create-react-app.dev/docs/adding-custom-environment-variables >>中的文档所述添加临时变量，从而重建服务器并运行 （$ env：REACT_APP_OTHER_OTHER_THING =“ abcdef”）-和（npm开始） <<，因为我在powershell上运行它，但仍然给出未定义的输出。

有什么我可以做的吗？谢谢

Answer 1

好的，我的问题似乎出在我在React App中制作的Webpack中，

我尝试按照此article的说明进行操作，效果很好！

配置完Webpack之后，我重新构建了它，重新启动了服务器，然后它就可以工作了！

Answer 2

无法发表评论，对不起，我将发布答案。

您确定要($REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start)吗，因为文档说($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

我刚刚添加了新的env var，它给了我未定义的含义，但是在服务器重新启动后，它就可以正常工作了。您可以尝试重新启动服务器，但不在终端中而是在.env文件中添加env变量吗？

UPD1：请注意，NODE_ENV是由npm start或npm run build命令设置的，它们分别设置为development或production。

如文档所述：

您不能手动覆盖NODE_ENV。这样可以防止开发人员意外地将缓慢的开发版本部署到生产中。

Answer 3

确保其具有正确的目录树

D：\您的反应项目\ .env

在这里您的反应项目\ .env.development

它应该位于默认README.md放置的路径中

Answer 4

对我有用的最简单的方法：

.env 文件：

REACT_APP_SERVER_URL=https://myapp.herokuapp.com

然后您可以在任何反应文件中使用该变量作为 process.env.REACT_APP_SERVER_URL

process.env 部分很容易被遗忘，这也是这个变量可能未定义的另一个原因。

Answer 5

这对我也有同样的问题。我仔细检查了所有连接是否正确，然后在启动后备份并杀死了我的服务器，一切正常。

.env变量在React JS应用中返回未定义

5 个答案:

D：\您的反应项目\ .env