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

Posted 2023-03-04

【中文标题】创建反应应用程序不拾取 .env 文件？

【英文标题】：create react app not picking up .env files?

【发布时间】：2018-06-30 21:25:27

【问题描述】：

我正在使用 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 用REACT_APP 正确指出了我的变量should be prefixed。

编辑 2

如果我将文件命名为.env，它可以正常工作，但如果我使用.env.development 或.end.production，则不行

【问题讨论】：

你能发布你的package.json文件吗？

process.env 是后端（节点或您正在使用的任何东西）可以读取的东西。前端包不知道process.env 是什么，因为它在浏览器中运行。您可以将 webpack 配置为在捆绑时将其传递到 bundle 中，或者您可以更轻松地从您正在渲染的索引文件的后端将其作为全局变量传递。

可能不是这种情况，但我遇到过几次，我发现的问题是当我的计算机使用大量内存时，我没有加载我的 .env 变量。我使用 ubuntu 16.4。尝试从终端 react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callback 加载变量，如果您仍然看不到它们，我会重新启动系统以降低内存使用率，然后再试一次，这通常会为我解决问题。

@RaulRene create-react-app 处理 .env 开箱即用，您无需进一步配置

【参考方案1】：

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 内容更改已在构建阶段加载。

【参考方案2】：

添加.env文件后，需要

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

它应该可以工作

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

import * as process from "process";

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

【参考方案6】：

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

【参考方案7】：

使用 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 文档：

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

【讨论】：

这很重要。我错过了，但是它不能与前缀一起使用

这适用于我使用.env 但不适用于.env.development 或.env.production ？

@shenku 您是否设法找出为什么它只适用于.env 而不适用于.env.development 和env.production

谢谢。几个小时以来，我一直在寻找答案。

我停止了我的开发服务器并再次启动它，发现我的 Env 变量被拾取。我的根文件夹中有 2 个文件 .env 和 .env.local。

【参考方案8】：

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

无论何时修改.env 文件

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

【参考方案9】：

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

【参考方案10】：

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

【参考方案11】：

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

【讨论】：

发挥了魅力！谢谢

【参考方案12】：

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

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

应该是

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

那是我的错误

【参考方案13】：

如果你想使用多个环境，比如.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 

【讨论】：

这是dotenv 还是dotenv-cli？

create-react-app：create-react-app docs 现在还支持为不同的环境使用不同的 .env 文件。无需显式使用 dotenv（create-react-app 实际上在后台使用它来处理环境变量）

@MariaJeysinghAnbu，该语法属于dotenv-cli，而不是dotenv：npmjs.com/package/dotenv-cli

@AMS777 我使用的是dotenv npm 而不是dotenv-cli

@MariaJeysinghAnbu，我想使用dotenv，但出现错误。我检查了文档，但没有找到命令行的 -e 选项。但是我在dotenv-cli 文档中找到了它。这就是我说的原因。我终于用env-cmd了，不要同时安装dotenv和dotenv-cli，可能会造成混乱。

【参考方案14】：

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

PORT=4000
BROWSER=none

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

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

【讨论】：

这是错误的。 github.com/facebook/create-react-app/blob/…

【参考方案15】：

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

原来是

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

但它必须是

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

【讨论】：

这样一个简单而好地方。我也做了同样的事，只见树木不见森林。谢谢

谢谢！我整天都在搜索，没有注意到这个小错误:)

感谢您发布此信息。这是一个容易犯的错误。

啊，我很尴尬。 +1

【参考方案16】：

关于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 文件中。

【讨论】：

非常感谢，这条评论救了我。 create-react-app 文档没有更新这个，所以我在找出问题所在

你在这里完全救了我。我在这件事上旋转。谢谢

谁给这家伙一枚勋章

感谢，即使在博客中他们没有正确给出这个命令

【参考方案17】：

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

【讨论】：

虽然在阅读文档时我看到它应该在根目录中，但我仍然设法将我的 .env 文件添加到 src 文件夹中......（facepalm）感谢您的回答。跨度>

我遇到了同样的问题，在 src 文件夹中时它不起作用，但在版本 3.4.3 中移动到根文件夹后它起作用了

是的，这就是问题所在，非常感谢

这是我没有做的。非常感谢

天哪！这应该是第一条评论。非常感谢。

【参考方案18】：

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

来源：Github

【讨论】：

太好了，我以为我做到了，但没有。谢谢，这有效！

【参考方案19】：

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

【参考方案20】：

为此，有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

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

.env.development
.env.production

所以这是为 dev 和 prod 使用不同环境变量的正确方法。

【讨论】：

尝试使用完整路径，例如：./node_modules/.bin/env-cmd

但我不建议在我的回答中使用这种方法。现在我知道 react 提供了与 .env 一起使用的机制