react 在build读取env 数据

**React 中如何在 Build 阶段读取 Env 数据**

在 React 应用中，Env 数据通常用于配置应用的环境信息，如 API 地址、端口号等。在开发阶段，我们可以使用 `process.env` 来访问这些数据。但是在 Build 阶段，由于 Webpack 等构建工具会将这些数据替换为预定义值，因此我们需要找到一种方式来在 Build 阶段读取 Env 数据。

**问题**

在 Build 阶段，如何读取 Env 数据，以便在生产环境中使用正确的配置信息？

**解决方案**

为了解决这个问题，我们可以使用一个名为 `dotenv` 的库，它允许我们在 Node.js 应用中加载 `.env` 文件中的环境变量。

### 安装 dotenv 库首先，我们需要安装 `dotenv` 库：

bashnpm install dotenv --save

或者，如果你使用 yarn：

bashyarn add dotenv

### 创建 .env 文件接下来，我们需要创建一个 `.env` 文件，用于存储我们的环境变量。例如：

makefileAPI_URL= />### 在 React 应用中使用 dotenv现在，我们可以在 React 应用中使用 `dotenv` 库来读取 Env 数据。在 `index.js` 或 `App.js` 文件中添加以下代码：

javascriptimport dotenv from 'dotenv';

// 加载 .env 文件中的环境变量dotenv.config();

console.log(process.env.API_URL); // 输出: // 输出:3000

### 在 Build 阶段使用 dotenv但是，在 Build 阶段，由于 Webpack 等构建工具会将这些数据替换为预定义值，因此我们需要找到一种方式来在 Build 阶段读取 Env 数据。

我们可以使用 `dotenv` 库提供的 `config()` 方法，传入一个选项对象，其中包含 `path` 属性，指向 `.env` 文件的路径：

javascriptimport dotenv from 'dotenv';

// 加载 .env 文件中的环境变量dotenv.config({ path: './.env' });

这样，在 Build 阶段，我们就可以读取 Env 数据了。

### 使用 Webpack 的 `DefinePlugin`

但是，如果你使用 Webpack，可能需要使用 `DefinePlugin` 来定义一个全局变量，以便在 Build 阶段读取 Env 数据。

例如：

javascriptimport webpack from 'webpack';

// 定义一个全局变量const definePlugin = new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify(process.env.API_URL),
'process.env.PORT': JSON.stringify(process.env.PORT),
});

这样，在 Build 阶段，我们就可以读取 Env 数据了。

### 总结在 React 应用中，Env 数据通常用于配置应用的环境信息。在开发阶段，我们可以使用 `process.env` 来访问这些数据。但是在 Build 阶段，由于 Webpack 等构建工具会将这些数据替换为预定义值，因此我们需要找到一种方式来在 Build 阶段读取 Env 数据。

通过使用 `dotenv` 库和 `DefinePlugin`，我们可以在 React 应用中读取 Env 数据，并且在 Build 阶段使用正确的配置信息。