创建react应用程序不拾取。env文件?

我使用创建react应用程序来引导我的应用程序。

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

包中。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。

编辑2

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

226017 次浏览
小开
最佳答案

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

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

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

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

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

小开

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

使用dotenv-cli包

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

为此，有env-cmd模块。通过npm npm i env-cmd安装，然后在scripts部分的package.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.production无效，则在这两个文件旁边创建一个空的.env文件。我不知道为什么，但这对我来说很管用。

小开

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

来源:Github

小开

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

小开

关于env-cmd。根据VMois的类型在gitHub上发布， env-cmd已经更新(截至编写时版本为9.0.1)，环境变量将在你的反应项目中工作如下:

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

在你的package.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.local env文件是自动获取的，但当你在项目范围内搜索MY_ENV_VAR时，也会从搜索结果中自动忽略它(可能是因为它在默认情况下被git忽略)。这意味着如果你像我一样在你的.env.local中有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

它应该能起作用

小开

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_才能使它工作。

并且确保重新启动测试/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重新启动

小开

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

  1. 确保文件中需要定义环境变量的所有import语句都是从本地项目而不是其他项目导入的(VSCode以这种方式错误地自动完成了一些import语句)

  2. 尝试退出当前终端实例，并在一个新实例中运行应用程序

小开

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

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


提交答案