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?

Answer 1

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

的键添加您的值

Answer 2

客户端没有环境变量这个概念。所以，如果你没有做任何事情来解决这个问题，它就不会被定义。

创建 React 应用程序可以选择从 .env 文件传递环境变量。如果您正在使用它，您可以查看此文档：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

如果没有react-create-app，可以使用dotenv npm包。

本质上，dotenv 和 react-create-app 所做的是在构建时为您声明这些变量。 'Build time' 这里很重要，因为它不像服务器。您只需为 1 个环境构建 1 个应用程序。您不能使用相同的构建部署到不同的环境。

Answer 3

process.env 是一个 Object，如果你想添加一个属性到一个对象。

process.env['API_URL'] = 'http://blabla.com:3000';
console.log(process.env);

输出

{ 
  ...
  API_URL: "http://blabla.com:3000",
  ...
  TERM_PROGRAM_VERSION: '1.34.0',
  LANG: 'en_US.UTF-8' 
}

Answer 4

了解幕后发生的事情很重要。
您的项目可以使用在您的环境中声明的变量，就好像它们是在您的 JS 文件中本地声明的一样。默认情况下，您将为您定义 NODE_ENV，以及任何其他以 REACT_APP_.

开头的环境变量

您必须创建以 REACT_APP_ 开头的自定义环境变量。
除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免意外暴露机器上可能具有相同名称的私钥。
如果是运行.

，更改任何环境变量都需要重新启动开发服务器

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

在 here and in here 阅读更多内容。

process.env.API_URL is undefined