Question

我正在使用create react app来启动我的应用。

我在根目录中添加了两个.env个文件.env.development和.env.production。

我的.env.development包括：

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

当我使用react-scripts start运行我的应用并控制出process.env时，它会吐出

{ NODE_ENV: "development", PUBLIC_URL: "" }

我尝试了不同的东西，但它只是没有拿起我的开发文件中的变量，我做错了什么？！

指挥结构是：

/.env.development
/src/index.js

Package.json脚本是：

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

修改

@jamcreencia正确指出我的变量should be prefixed和REACT_APP。

修改2

如果我将文件命名为.env，但如果我使用.env.development或.end.production

，则可以。

Answer 1

使用create-react-app，您需要在REACT_APP_前加上变量名称才能访问它。

示例：

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

See more info here

Answer 2

如果您想使用多个环境，例如.env.development .env.production

使用single ampersand will background

在项目根文件夹

中添加.env.development和.env.production

和你的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

Answer 3

对于应用上述所有答案但没有工作的人，只需重新启动 npm start 的终端，停止实时服务器并再次运行它，它就会工作，因为它对我有用

Answer 4

为此，有env-cmd模块。通过npm npm i env-cmd安装，然后在package.json部分的scripts文件中进行安装：

  "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变量的正确方法。

Answer 5

对我有用的是安装 env-cmd，然后在我的 package.JSON 中添加以下代码行

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

}

Answer 6

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

Answer 7

对于任何 VS Code 用户，请注意 .env.local env 文件是自动获取的，但是当您对 MY_ENV_VAR 进行项目范围的搜索时，也会从搜索结果中自动忽略（可能是因为它被 git 忽略了）默认情况下）。这意味着，如果您像我一样在 MY_ENV_VAR= 中有 .env.local 而忘记了它，它会破坏事物并且您将花费 15 分钟非常困惑。

Answer 8

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

是

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

但必须是

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

Answer 9

如果.env文件有效，但.env.development或.env.production无效，则在这两个文件旁边创建一个空的.env文件。我不知道为什么，但这对我有用。

Answer 10

最新的react-scripts（3.2.0）就像说

一样简单

PORT=4000
BROWSER=none

应该位于根文件夹中的.env或.env.development文件（..etc）中。

它不能与REACT_APP前缀一起使用（我认为文档已过时），并且不需要任何额外的npm软件包（反应脚本已经包含dotenv 6.2.0）

Answer 11

请记住，env文件中的API密钥后不要使用分号。

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

应该是

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

那是我的错误

Answer 12

关于env-cmd。根据VMois的类型post on 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"
  }

在您的 package.json 文件中。

Answer 13

确保您的.env文件位于根目录中，而不是src文件夹中。

Answer 14

遇到了同样的问题！解决方案是关闭与我的节点服务器的连接（可以使用CTRL + C进行此操作）。然后使用“ npm run start”重新启动服务器，.env应该可以正常工作。

来源：this answer

Answer 15

在处理 .env 文件时，无论是前端还是后端。

无论何时修改 .env 文件，您都必须重新启动相应的服务器才能使更改在应用程序中生效。
热重载不会从 .env 文件读取更改。

Answer 16

我也没有得到任何回报。出于某种原因，我认为环境文件应该是 dev.env、qa.env 等。实际上，它只是“.env”。就是这样。万一其他人犯了这个错误。

Answer 17

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

就我而言，手动重启服务器工作正常:)

Answer 18

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

NA

只需将其删除即可，如果您也是这种情况。

创建反应应用程序没有拿起.env文件？

18 个答案: