创建 react 应用程序没有选择 .env 文件？

IT技术 reactjs create-react-app
2021-04-11 15:53:35

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

我尝试了不同的东西，但它只是没有在我的开发文件中找到真实的东西，我做错了什么？！

目录结构为：

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

6个回答

使用 create react app，您需要REACT_APP_在变量名前加上前缀。前任：

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

关于添加自定义环境变量的CRA 文档：

注意：您必须创建以REACT_APP_. 任何其他变量NODE_ENV都会被忽略，以避免意外暴露机器上可能具有相同名称的私钥

@shenku 你有没有设法找出为什么它只适用于.env而不适用于.env.development和env.production
2021-05-22 15:53:35
这是至关重要的。我错过了，但是它不能与前缀一起使用
2021-06-05 15:53:35
这适用于我使用.env但不适用于.env.development或.env.production？
2021-06-06 15:53:35
我停止了我的开发服务器并再次启动它，看到我的 Env 变量被选中。我有 2 个文件，.env并且.env.local在我的根文件夹中。
2021-06-06 15:53:35
谢谢你。几个小时以来，我一直在寻找答案。
2021-06-14 15:53:35

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

我遇到了同样的问题，它在 src 文件夹中不起作用，但在版本 3.4.3 中移动到根文件夹后它起作用了
2021-05-26 15:53:35
我的天啊！这应该是第一个评论。非常感谢。
2021-05-27 15:53:35
这是我没有做的。太感谢了
2021-05-29 15:53:35
虽然在阅读文档时我看到它应该在根目录中，但我仍然设法将我的 .env 文件添加到 src 文件夹中...（facepalm）感谢您的回答。
2021-06-08 15:53:35
是的，这就是问题所在，非常感谢
2021-06-13 15:53:35

有同样的问题！解决方案是关闭与我的节点服务器的连接（您可以使用 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
create-react-app: create-react-app docs现在也支持针对不同环境使用不同的 .env 文件。无需显式使用 dotenv（create-react-app 实际上是在幕后使用它来处理环境变量）
2021-05-26 15:53:35
@AMS777 我使用的是dotenv npm 而不是dotenv-cli
2021-06-02 15:53:35
@MariaJeysinghAnbu，我想使用dotenv但出现错误。我检查了文档，但没有找到-e命令行的选项。但是我在dotenv-cli文档中找到了它。这就是我说的原因。我终于在使用env-cmd, 而不是dotenv同时dotenv-cli安装和安装，这可能会导致混淆。
2021-06-12 15:53:35
@MariaJeysinghAnbu，该语法属于dotenv-cli，而不是dotenv：npmjs.com/package/dotenv-cli
2021-06-19 15:53:35
这是dotenv还是dotenv-cli？
2021-06-21 15:53:35

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

有人给这家伙一枚奖牌
2021-06-04 15:53:35
感谢即使在博客中他们也没有正确给出这个命令
2021-06-11 15:53:35
非常感谢，这条评论救了我。create-react-app 文档没有更新这个，所以我在弄清楚什么是错的
2021-06-14 15:53:35
你在这里完全救了我。我一直在琢磨这件事。谢谢
2021-06-19 15:53:35
其它你可能感兴趣的问题
上一篇为使用 Flask 的 create-react-app 创建的前端提供服务 下一篇何时使用“componentDidUpdate”方法？