ant design pro 的环境变量的使用

Ant Design Pro 的环境变量使用

在 Ant Design Pro 项目中，环境变量的使用对于管理不同环境（如开发、测试、生产）的配置至关重要。通过合理使用环境变量，开发者可以实现根据环境动态调整应用的行为，如 API 请求地址、调试模式、日志级别等。Ant Design Pro 基于 Umi 框架，Umi 提供了对环境变量的内置支持，使得环境变量的配置和使用变得简单且灵活。

一、环境变量的基本使用

1.1 环境变量文件

在 Ant Design Pro 项目根目录下，通常会有多个以 .env 为前缀的环境配置文件，这些文件用于定义不同环境的变量。常见的文件包括：

.env：默认环境配置文件。
.env.development：开发环境的配置文件。
.env.production：生产环境的配置文件。
.env.test：测试环境的配置文件。

每个文件内的变量以 KEY=VALUE 的形式定义。例如：

API_URL=https://api.example.com
APP_ENV=production

解释：

API_URL：定义 API 请求的基础地址，根据不同环境配置不同的地址。
APP_ENV：定义当前应用的环境标识符，如 development、production 或 test。

1.2 Umi 环境变量约定

在 Umi 中，环境变量需要以 REACT_APP_ 为前缀，才能在前端应用中通过 process.env 访问。例如：

REACT_APP_API_URL=https://api.example.com
REACT_APP_DEBUG=true

这样，代码中可以通过 process.env.REACT_APP_API_URL 来获取环境变量的值。

const apiUrl = process.env.REACT_APP_API_URL;
console.log('API URL:', apiUrl);

解释：

process.env.REACT_APP_API_URL：通过 process.env 获取环境变量 REACT_APP_API_URL 的值。
REACT_APP_ 前缀是 Umi 对环境变量的约定，这个前缀确保变量能在客户端代码中被访问到。

二、环境变量的加载顺序

Ant Design Pro 会根据当前的构建或启动环境加载相应的 .env 文件，加载顺序如下：

.env：默认环境变量文件，所有环境都会加载。
.env.local：本地覆盖配置，会覆盖 .env 中的变量配置，适合本地环境的个性化配置。
.env.[env]：特定环境的配置文件，如 .env.development、.env.production 等。
.env.[env].local：本地特定环境配置文件，如 .env.development.local、.env.production.local，这些文件不会被提交到版本控制中，适合环境中的临时配置。

Umi 会根据当前的环境（NODE_ENV 或 UMI_ENV）决定加载哪一个 .env.[env] 文件。一般情况下，NODE_ENV 为 development 或 production，分别对应开发环境和生产环境。

三、动态配置 API 地址

在实际项目中，不同的环境通常会有不同的 API 基础地址。通过使用环境变量，可以在不同的 .env 文件中配置不同的 API 地址：

.env.development：

REACT_APP_API_URL=https://dev.api.example.com

.env.production：

REACT_APP_API_URL=https://api.example.com

在代码中通过以下方式动态获取 API 地址：

const apiUrl = process.env.REACT_APP_API_URL;

fetch(`${apiUrl}/endpoint`)
  .then(response => response.json())
  .then(data => console.log(data));

解释：

fetch 请求中的 apiUrl 动态获取自 process.env.REACT_APP_API_URL，不同环境下会自动使用相应的 API 地址。

四、示例配置

4.1 配置不同环境的基础 API 地址

假设需要在开发和生产环境下使用不同的 API 地址，可以在 .env.development 和 .env.production 文件中分别配置：

.env.development：

REACT_APP_API_URL=https://dev-api.example.com

.env.production：

REACT_APP_API_URL=https://api.example.com

然后在项目的 config.js 或者业务代码中引用该变量：

export const API_URL = process.env.REACT_APP_API_URL || 'https://default-api.example.com';

解释：

process.env.REACT_APP_API_URL：获取当前环境的 API URL，如果未定义，则使用默认值。

4.2 本地调试与临时覆盖

在开发过程中，可能需要对某些变量进行本地临时修改而不影响团队其他成员的开发环境。这时可以使用 .env.local 或 .env.development.local 文件。例如：

.env.development.local：
```
REACT_APP_API_URL=http://localhost:3000
```

此文件通常不会提交到版本控制系统（如 Git），但可以临时覆盖开发环境下的 API 地址，方便本地调试。

五、思维导图

Ant Design Pro 环境变量使用
    1. 环境变量文件
        1.1 .env
        1.2 .env.development
        1.3 .env.production
        1.4 .env.local
    2. 变量使用规则
        2.1 REACT_APP_ 前缀
        2.2 process.env 访问变量
    3. 动态配置
        3.1 动态 API 地址
        3.2 不同环境的配置示例
    4. 加载顺序
        4.1 默认加载顺序
        4.2 本地覆盖配置

六、总结

Ant Design Pro 中通过 Umi 框架内置的环境变量管理机制，可以轻松实现不同环境的动态配置。通过合理使用 .env 文件、REACT_APP_ 前缀以及 process.env 变量，开发者能够在项目中根据不同环境配置动态调整行为，从而提高开发效率和代码灵活性。