使用create react app，你需要在变量名前加上REACT_APP_前缀。例:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

**确保你的.env文件在根目录下，而不是在src文件夹里。

CRA文档添加自定义环境变量:

注意:必须创建以REACT_APP_开头的自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免意外地暴露机器上可能具有相同名称的私钥

如果你想使用多个环境，比如。environment .development . environment .production

使用dotenv-cli包

添加.env.development和.env。项目根文件夹中的生产

还有package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

然后根据环境来建造

npm run-script build-dev 

为此，有env-cmd模块。安装通过npm npm i env-cmd然后在你的包。Json文件在脚本部分:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

在你的项目根目录中，你必须创建两个env变量相同但值不同的文件:

.env.development
.env.production

那就把他们排除在公众之外。在你的.gitignore文件中添加两行:

.env.development
.env.production

因此，这是为dev和prod使用不同的env变量的正确方法。

如果。env文件工作，但是。env.development或。env.development。然后在这两个文件旁边创建一个空的.env文件。我不知道为什么，但这对我来说很管用。

也有同样的问题!解决方案是关闭与我的节点服务器的连接(你可以用CTRL + C来做)，然后用'npm run start'重新启动服务器，.env应该可以正常工作。

来源:Github

确保你的.env文件在根目录中，而不是在src文件夹中。

关于env-cmd。根据VMois在gitHub上的帖子，env-cmd已经更新(编写时版本为9.0.1)，环境变量将在你的React项目上工作如下:

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

在你的包裹里。json文件。

我也遇到了同样的问题，但这是因为我的.env文件是YAML格式而不是JS格式。

这是

REACT_APP_API_PATH: 'https://my.api.path'

但这是必须的

REACT_APP_API_PATH = 'https://my.api.path'

对于最新的react-scripts(3.2.0)来说，这很简单

PORT=4000
BROWSER=none

在你的。env或。env.development文件(..etc)中，这应该是在根文件夹中。

它将无法使用REACT_APP前缀(我猜docs已经过时了)，它不需要任何额外的npm包(react-scripts已经包含dotenv 6.2.0)

记住在env文件中的API键后面不要有分号。

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

应该是

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

这是我的错误

对于那些应用了上面所有这些答案但没有工作的人，只要重新启动npm start的终端，停止活动服务器并再次运行它，它就会工作，因为它对我有用

对于任何VS Code用户，请注意.env. conf文件。本地env文件是自动获取的，但当你在项目范围内搜索MY_ENV_VAR时，也会从搜索结果中自动忽略(可能是因为默认情况下git忽略了它)。这意味着如果你的.env. var =中有MY_ENV_VAR=。像我这样的当地人忘记了它，它会破坏东西，你会花15分钟非常困惑。

当你从环境文件中获得undefined时，只需停止终端并使用NPM start命令重新启动。

当使用.env文件时，无论是前端还是后端。

每当修改.env文件时，必须重新启动相应的服务器，以便更改在应用程序中生效。 热重载不会从.env文件中读取更改。

我也没有得到任何价值。出于某种原因，我认为环境文件应该是dev.env, qa。env等等。实际上，它只是“。env”。就是这样。以防别人犯同样的错误。

create-react不支持热重载功能的.env文件，因为它们不是Javascript。因此，当您更改env文件时，请确保手动启动服务器以查看新更改的效果。

在我的情况下，手动重启服务器工作良好:)

在我注意到我的IDE添加了一个导入之前，我挣扎了一个好小时:

import * as process from "process";

把它拿掉就没事了，如果你也是这样的话。

对我有用的是在我的包中安装env-cmd。JSON添加以下代码行

"scripts": {
"start": "env-cmd -f .env.development react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

}

添加.env文件后，您需要

重新启动应用程序 关闭服务器 再次运行NPM start

它应该能起作用

你的项目可以使用在你的环境中声明的变量，就像它们在你的JS文件中本地声明一样。默认情况下，您将拥有为您定义的NODE_ENV，以及以REACT_APP_开头的任何其他环境变量。

参考:https://create-react-app.dev/docs/adding-custom-environment-variables

那份文件造成了混乱。

所以你实际上需要在.env中放入前缀REACT_APP_才能使它工作。

并且确保重新启动测试/dev/prod服务器，因为.env内容更改是在构建阶段加载的。

我忘了加上process。env。

它看起来是这样的

const domain = process.env.REACT_APP_AUTH0_DOMAIN;

第一步:

在你的。env。在本地文件中添加REACT_APP_your_API_key

第二步:

添加配置文件${process.env.REACT_APP_Your_API_key}

第三步:

必须重新启动React应用程序，然后测试它是否工作。

主要是我忘了最后一步

1-确保.env文件基于你的react应用根目录

2-对于react应用程序，你需要在变量名前加上REACT_APP_前缀。例:REACT_APP_API_URL

3 .env文件修改后，kill服务器和NPM重新启动

如果以上这些方法都不适合你，试试下面这些可能的方法:

确保文件中需要定义环境变量的所有导入语句都是从本地项目导入的，而不是从其他项目导入的(VSCode错误地以这种方式自动完成了一些导入语句) 尝试退出当前的终端实例，并在一个新实例中运行应用程序

我有同样的问题，我无法在App.js中访问.env变量。 我已经解决了使用创建正确的。env文件的问题。

在我的情况下，我从不同的操作系统复制文件，并在ubuntu系统中使用 所以我只是做“sudo touch .env”，并添加我的变量，重新启动应用程序，然后它为我工作。

我犯了个愚蠢的错误，把我的文件命名为秘密文件。env，因为我在node。js中就是这么做的。 在将名称更改为.env，重新启动终端，并再次运行npm start之后，一切都很顺利