process.env.API_URL 未定义

Question

我构建了一个项目，前端使用 React，后端使用 Strapi（基于 Node.js）。

在客户端，我正在尝试像这样访问我的 api url：

 const apiUrl = process.env.API_URL || 'http://localhost:1337'
const strapi = new Strapi(apiUrl);

但是 process.env.API_URL 是未定义的。如果我记录 process.env 我得到的是一个包含以下内容的对象：

 NODE_ENV: "development"
PUBLIC_URL: ""

如何访问我的 api_url ？我猜有一个我应该自己定义 API_URL 的文件？

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

Answer 1

假设您正在使用 create react app，请确保添加前缀 REACT_APP， 例如 REACT_APP_API_URL 。在您的项目 src 中创建一个文件 .env.development 或 .env.production 并使用带有前缀的键添加您的值

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

Answer 2

了解幕后发生的事情很重要。

您的项目可以使用在您的环境中声明的变量，就好像它们是在您的 JS 文件中本地声明的一样。默认情况下，您将为您定义 NODE_ENV 以及以 REACT_APP_ 开头的任何其他环境变量。

您必须创建以 REACT_APP_ 开头的自定义环境变量。

除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免意外暴露机器上可能具有相同名称的私钥。

更改任何环境变量都将要求您重新启动正在运行的开发服务器。

这些环境变量将在 process.env 上为您定义。

例如，有一个名为 REACT_APP_NOT_SECRET_CODE 的环境变量将在您的 JS 中公开为 process.env.REACT_APP_NOT_SECRET_CODE 。

在 此处 和 此处 阅读更多内容。

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