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

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


当前回答

对于任何VS Code用户,请注意.env. conf文件。本地env文件是自动获取的,但当你在项目范围内搜索MY_ENV_VAR时,也会从搜索结果中自动忽略(可能是因为默认情况下git忽略了它)。这意味着如果你的.env. var =中有MY_ENV_VAR=。像我这样的当地人忘记了它,它会破坏东西,你会花15分钟非常困惑。

其他回答

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

关于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文件。

对于任何VS Code用户,请注意.env. conf文件。本地env文件是自动获取的,但当你在项目范围内搜索MY_ENV_VAR时,也会从搜索结果中自动忽略(可能是因为默认情况下git忽略了它)。这意味着如果你的.env. var =中有MY_ENV_VAR=。像我这样的当地人忘记了它,它会破坏东西,你会花15分钟非常困惑。

你的项目可以使用在你的环境中声明的变量,就像它们在你的JS文件中本地声明一样。默认情况下,您将拥有为您定义的NODE_ENV,以及以REACT_APP_开头的任何其他环境变量。

参考:https://create-react-app.dev/docs/adding-custom-environment-variables

那份文件造成了混乱。

所以你实际上需要在.env中放入前缀REACT_APP_才能使它工作。

并且确保重新启动测试/dev/prod服务器,因为.env内容更改是在构建阶段加载的。

create-react不支持热重载功能的.env文件,因为它们不是Javascript。因此,当您更改env文件时,请确保手动启动服务器以查看新更改的效果。

在我的情况下,手动重启服务器工作良好:)