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

我添加了两个。env文件。env.development和。env。生产在根。

我的. environment .development包括:

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

当我运行我的应用程序使用反应脚本启动和控制台进程。环境,它吐出

{ 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就不行


当前回答

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

import * as process from "process";

把它拿掉就没事了,如果你也是这样的话。

其他回答

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

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

如果。env文件工作,但是。env.development或。env.development。然后在这两个文件旁边创建一个空的.env文件。我不知道为什么,但这对我来说很管用。

第一步:

在你的。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重新启动

使用create react app,你需要在变量名前加上REACT_APP_前缀。例:

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

**确保你的.env文件在根目录下,而不是在src文件夹里。

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

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