Reactjs 创建没有拾取.env文件的应用程序？

我正在使用启动我的应用程序

我在根目录中添加了两个

.env

文件

.env.development

和

.env.production

我的

.env.development

包括：

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

当我使用

react脚本启动
并控制台输出
process.env
运行我的应用程序时，它会吐出来

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

我尝试过不同的方法，但只是没有在我的开发文件中获取veriables，我做错了什么

直接结构为：

/.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",

编辑：

@Jamcrencia用
REACT\u APP
正确指出了我的变量

编辑2

如果我将文件命名为
.env
，它可以正常工作，但如果我使用
.env.development
或
.end.production
则不行。使用
创建react app
，您需要将
react\u app
作为变量名的前缀才能访问它

例如：

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

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

使用

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

为此，有一个模块。通过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.development
.env.production

然后将他们排除在公众之外。为此，请在
.gitignore
文件中添加两行：

.env.development
.env.production

因此，对于dev和prod使用不同的env变量，这是一种正确的方法。
如果
.env
文件可以工作，但是
.env.development
或
.env.production
不可以，那么在这两个文件旁边创建一个空的
.env
文件。我不知道为什么，但这对我有效。
也有同样的问题！解决方案是关闭与我的节点服务器的连接（您可以使用CTRL+C进行此操作）。然后用“npm run start”和.env重新启动服务器，应该可以正常工作

来源：
确保.env文件位于根目录中，而不是src文件夹中。
关于。根据VMois的类型，env cmd已经更新（编写时为9.0.1版），环境变量将在您的React项目上按如下方式工作：

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

是的

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

但这是必须的

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

在最新的react脚本（3.2.0）中，它是一个简单的

PORT=4000
BROWSER=none

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

它不适用于then REACT_应用程序前缀（我猜文档已经过时了），也不需要任何额外的npm包（REACT脚本已经包含dotenv 6.2.0）
，记住不要在env文件中的API键后使用分号

REACT_APP_API_KEY='ae87cec695cc4heheh639d06c9274a'

应该是

REACT\u APP\u API\u KEY='AE87CEC695CC44HEH1639D06C9274A'

这是我的错误
对于应用上述所有答案但不起作用的人，只需重新启动npm start的终端，停止实时服务器并再次运行，它就会起作用，因为它对我有效
对于任何VS Code用户，请注意，.env.localenv文件是自动来源的，但是，当您在项目范围内搜索MY_ENV_VAR时，也会自动从搜索结果中忽略它（可能是因为默认情况下它是git忽略的）。这意味着，如果您的
.ENV.local
中有
MY\u ENV\u VAR=
像我一样，并且忘记了它，当你从环境文件中得到未定义的
时，只需停止终端并用
npm start
命令重新启动。
在使用
.env
文件时，无论是前端还是后端


无论何时修改
.env
文件，都必须重新启动相应的服务器，才能使更改在应用程序中生效
热重新加载不会从
.env
文件读取更改
您可以发布您的
包.json
文件吗？
process.env
是后端（节点或您正在使用的任何东西）可以读取的东西。前端包在浏览器中运行时不知道process.env是什么。您可以将webpack配置为在绑定时在捆绑包中传递它，或者更简单的是，您可以将它从后端作为全局变量呈现的索引文件中传递。可能不是这样，但我已经多次遇到过这种情况，我发现的问题是，当我的计算机使用大量内存时，我没有加载.env变量。我使用ubuntu 16.4。尝试从终端
react scripts start API\u URL加载变量=http://localhost:3000/api 回调URL=http://localhost:3005/callback
如果您仍然看不到它们，我会重新启动系统以降低内存使用率，然后再试一次，通常这会帮我解决问题。@RaulRene为您创建react app handles.env开箱即用，无需进一步说明这一点至关重要。我错过了它，但它不适用于前缀。当我使用
.env
时，它可以工作，但不适用于
.env.development
或
.env.production
？@shenku你找到了为什么它只适用于
.env
而不适用于
.env.development
和
env.production
谢谢。我已经寻找了几个小时的答案。我停止了我的开发服务器，再次启动它，并看到我的Env变量被拾取。我的根文件夹中有两个文件
.env
和
.env.local
。请尝试使用完整路径，如：./node\u modules/.bin/env，但我不建议在回答中使用这种方法。现在我知道react提供了内置的机械学t
PORT=4000
BROWSER=none