在react中构建后更改process.env.API_BASE_URL

Question

所以，我有一个 React 应用程序，它在 api 实用程序中使用

process.env.API_BASE_URL

来连接到 API。 到目前为止，我一直在使用两个 webpack：本地 webpack 和生产 webpack 来为 dev 和 prod 设置 API_BASE_URL。

我想在构建后更改

API_BASE_URL

。陷入这个问题是因为变量作为值嵌入到构建中，并且该构建应该分发到不同的客户端，以便它们可以有单独的后端 url，并且更改 webpack 不是一个选项，因为这些已经非常混乱。 下面是我的 webpack 代码：

const GLOBALS = {
  'process.env': {
    NODE_ENV: JSON.stringify('production'),
    API_BASE_URL: JSON.stringify(
      config.API_BASE_URL || 'http://127.0.0.1:8000'
    ),
    __BUILDVERSION__: JSON.stringify(commitHash),
    __BUILDTIME__: new Date().getTime(),
    __PRODUCTVERSION__: JSON.stringify(productVersion),
  },
};

main.js 文件中的以下代码：

  console.log(
    process.env.API_BASE_URL,
    process.env.REACT_APP_API_BASE_URL,
    process.env
  );

记录此输出：

 undefined
 http://127.0.0.1
 { API_BASE_URL: "http://127.0.0.1", WS_BASE_URL: undefined, __BUILDVERSION__: commit, __PRODUCTVERSION__: "latest" }

我的根文件夹中有一个 .env 文件，其中包含

REACT_APP_API_BASE_URL="http://testurl"

我尝试了这个解决方案，但没有成功。

Answer 1

在 React 中构建后，您无法更改基本环境变量。如果您想在部署时更改环境变量，您可以添加

REACT_APP_

作为反应将拾取的环境变量的前缀。

您可以在此处阅读有关在 React 中使用环境变量的更多信息：https://create-react-app.dev/docs/adding-custom-environment-variables/