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

我添加了两个。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就不行


当前回答

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

来源:Github

其他回答

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

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

我犯了个愚蠢的错误,把我的文件命名为秘密文件。env,因为我在node。js中就是这么做的。 在将名称更改为.env,重新启动终端,并再次运行npm start之后,一切都很顺利

使用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之外的任何其他变量都将被忽略,以避免意外地暴露机器上可能具有相同名称的私钥

如果你想使用多个环境,比如。environment .development . environment .production

使用dotenv-cli包

添加.env.development和.env。项目根文件夹中的生产

还有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 

对于最新的react-scripts(3.2.0)来说,这很简单

PORT=4000
BROWSER=none

在你的。env或。env.development文件(..etc)中,这应该是在根文件夹中。

它将无法使用REACT_APP前缀(我猜docs已经过时了),它不需要任何额外的npm包(react-scripts已经包含dotenv 6.2.0)