创建反应应用程序不拿起.env文件？

我正在使用create react app引导我的应用程序。

我已经添加了两个.env文件.env.development，并.env.production在根。

我的.env.development包括：

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

当我使用来运行我的应用程序react-scripts start并退出时，process.env它会吐出来

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

我尝试了不同的方法，但只是没有在开发文件中使用Veriable，我在做什么错？！

指令结构为：

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

编辑：

@jamcreencia正确地指出我的变量应该前缀用REACT_APP。

编辑2

如果我为文件命名，则可以，.env但是如果我使用.env.development或.end.production

使用create-react-app，您需要REACT_APP_在变量名之前添加前缀才能访问它。

例：

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

在这里查看更多信息

确保您的.env文件位于根目录中，而不是src文件夹中。

遇到同样的问题！解决方案是关闭与我的节点服务器的连接（可以使用CTRL + C进行此操作）。然后使用“ npm run start”重新启动服务器，.env应该可以正常工作。

资料来源：Github

如果您想使用多种环境 .env.development .env.production

使用dotenv-cli软件包

添加.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 

关于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"
  }

在您的package.json文件中。

为此，有env-cmd模块。通过npm安装，npm i env-cmd然后在您的package.json文件的scripts部分中：

  "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变量的正确方法。

我遇到了同样的问题，但这是因为我的.env文件使用YAML格式而不是JS。

它是

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

但它必须是

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

如果.env文件的工作，但.env.development还是.env.production没有，然后创建一个空.env文件旁边那两个。我不知道为什么，但这对我有用。

并请记住，env文件中的API密钥后不要使用分号。

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

应该

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

那是我的错误

在最新的react-scripts（3.2.0）中，说的很简单

PORT=4000
BROWSER=none

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

它不能与REACT_APP前缀一起使用（我认为文档已过时），并且不需要任何额外的npm包（反应脚本已经包含dotenv 6.2.0）