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

Question

我正在使用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: "" }

我尝试了不同的东西,但它只是没有拿起我的开发文件中的变量,我做错了什么？!

Directry结构是:

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

Answer 1

使用create-react-app,您需要为REACT_APP_变量名称添加前缀才能访问它.

例:

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

在这里查看更多信息

Answer 2

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

Answer 3

1-确保 .env 文件基于您的 React 应用程序根目录

2-对于反应应用程序，您需要在变量名称前添加 REACT_APP_ 前缀。例如：REACT_APP_API_URL

3- .env 文件修改后，终止服务器并重新启动 npm

Answer 4

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

使用dotenv包

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

Answer 5

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

Answer 6

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

它是

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

但它必须是

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

Answer 7

为此，有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 变量的正确方法。

Answer 8

对于应用上述所有这些答案但不起作用的人，只需重新启动 npm start 的终端，停止实时服务器并再次运行它，它就会起作用，因为它对我有用

Answer 9

在处理.env文件时，无论是前端还是后端。

• 每当您修改.env文件时，都必须重新启动相应的服务器才能使更改在应用程序中生效。
• 热重载不会从.env文件中读取更改。

Answer 10

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

资料来源：Github

Answer 11

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

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

该文档造成了混乱。

因此，您实际上需要REACT_APP_在 .env 中添加前缀才能使其正常工作。

并确保重新启动 test/dev/prod 服务器，因为 .env 内容更改已在构建阶段加载。

Answer 12

如果.env文件有效但.env.development或.env.production无效，则.env在这两个文件旁边创建一个空文件。我不知道为什么，但这对我有用。

Answer 13

当您undefined从环境文件中获取时，只需停止终端并使用npm start命令重新启动即可。