创建反应应用程序不拾取 .env 文件？

Question

我正在使用 create react app 来 bootstrap 我的应用程序。

我在根目录中添加了两个 .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 用 REACT_APP.

正确指出了我的变量 should be prefixed

编辑 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

Adding Custom Environment Variables 上的 CRA 文档：

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name

Answer 2

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

使用dotenv-cli package

在项目根文件夹中添加.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

为此，有 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.development
.env.production

然后将它们从 public 中排除。为此，在您的 .gitignore 文件中添加两行：

.env.development
.env.production

所以这是为开发和生产使用不同环境变量的正确方法。

Answer 4

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

Answer 5

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

来源：Github

Answer 6

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

Answer 7

关于 env-cmd. As per VMois's kind 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 8

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

是

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

但必须

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

Answer 9

从最新的 react-scripts (3.2.0) 开始，这很简单

PORT=4000
BROWSER=none

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

它不会使用 then REACT_APP 前缀（我猜文档已经过时了）并且它不需要任何额外的 npm 包（react-scripts 已经包含 dotenv 6.2.0）

Answer 10

并且记住 env-file 中的 API 键后不要有 semi-colon。

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

应该是

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

那是我的错误

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

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

Answer 15

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

Answer 16

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

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

Answer 17

挣扎了一个小时才注意到我的同类 IDE 添加了一个导入：

import * as process from "process";

只要删除它就可以了，如果你也是这种情况的话。

Answer 18

对我有用的是安装 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 19

添加.env个文件后，您需要

重新启动您的应用程序
杀死服务器
运行 npm start 再一次

它应该可以工作

Answer 20

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

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

该文档造成混淆。

因此您实际上需要在 .env 中添加前缀 REACT_APP_ 才能使其正常工作。

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

Answer 21

我忘了加process.env。

看起来像这样

const domain = process.env.REACT_APP_AUTH0_DOMAIN;

Answer 22

第一步：

在您的 .env.local 文件中以这种方式添加 REACT_APP_your_API_key

第二步：

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

第三步：

必须重启你的 React App 然后测试它是否工作.

主要是最后一步忘记了

Answer 23

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

2- 对于 React 应用程序，您需要在变量名称前加上 REACT_APP_ 前缀。例如：REACT_APP_API_URL

3- .env 文件修改后 kill 服务器和 npm 再次启动

Answer 24

如果上述 none 个解决方案对您有效，请尝试以下可能的解决方案：

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

创建反应应用程序不拾取 .env 文件？

create react app not picking up .env files?

reactjs

create-react-app