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

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

其他回答

为此,有env-cmd模块。安装通过npm npm i env-cmd然后在你的包。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变量的正确方法。

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

关于env-cmd。根据VMois在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"
  }

在你的包裹里。json文件。

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

}

我忘了加上process。env。

它看起来是这样的

const domain = process.env.REACT_APP_AUTH0_DOMAIN;