reactjs - 创建 react 应用程序不拾取 .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 正确指出了我的变量 should be prefixed与 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

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

CRA 文档 Adding Custom Environment Variables :

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name