创建反应应用程序不拾取 .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: "" }

我尝试了不同的东西，但它只是没有在我的开发文件中获取验证，我做错了什么？！

目录结构为：

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

原文由 shenku 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 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 之外的任何其他变量都将被忽略，以避免在机器上意外暴露可能具有相同名称的私钥

原文由 jamcreencia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Ryan Dhungel 发布，翻译遵循 CC BY-SA 4.0 许可协议