小能豆

创建 React 应用程序未拾取 .env 文件?

javascript

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


阅读 53

收藏
2024-06-03

共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 文档:

注意:您必须创建以 开头的自定义环境变量REACT_APP_。除 之外的任何其他变量NODE_ENV都将被忽略,以避免意外在可能具有相同名称的计算机上暴露私钥

2024-06-03