umi 创建的项目中，如何配置多个环境变量

**UMI 多环境变量配置**

在 UMI 中，我们可以通过 `config` 文件来配置应用程序的环境变量。然而，在实际开发过程中，我们可能需要为不同的环境（如生产、测试、开发）配置不同的环境变量。这篇文章将指导你如何在 UMI项目中配置多个环境变量。

**环境变量配置**

首先，让我们创建一个 `config` 文件夹，并在其中创建三个文件：`dev.js`、`test.js` 和 `prod.js`。这些文件分别用于开发、测试和生产环境的配置。

javascript// config/dev.jsmodule.exports = {
 env: 'development',
 // 开发环境下的环境变量 variables: {
 NODE_ENV: 'development',
 API_URL: ' /> }
};

// config/test.jsmodule.exports = {
 env: 'testing',
 // 测试环境下的环境变量 variables: {
 NODE_ENV: 'testing',
 API_URL: ' /> }
};

// config/prod.jsmodule.exports = {
 env: 'production',
 // 生产环境下的环境变量 variables: {
 NODE_ENV: 'production',
 API_URL: ' /> }
};

在上面的例子中，我们分别配置了开发、测试和生产环境的 `NODE_ENV` 和 `API_URL` 变量。

**使用环境变量**

现在，让我们在我们的 UMI 应用程序中使用这些环境变量。我们可以通过 `useConfig()` 方法来获取当前环境下的配置。

javascript// src/pages/index.jsimport { useConfig } from '@umijs/max';

const config = useConfig();

console.log(config.variables.NODE_ENV); // developmentconsole.log(config.variables.API_URL); //  />在上面的例子中，我们使用 `useConfig()` 方法获取当前环境下的配置，然后通过 `config.variables` 来访问环境变量。

**多环境变量配置**

现在，让我们来看看如何配置多个环境变量。我们可以通过在 `config` 文件夹下创建多个文件，每个文件对应一个环境。

javascript// config/dev.jsmodule.exports = {
env: 'development',
variables: {
NODE_ENV: 'development',
API_URL: ' /> }
};

// config/test-dev.jsmodule.exports = {
env: 'testing-development',
variables: {
NODE_ENV: 'testing-development',
API_URL: ' /> }
};

// config/prod.jsmodule.exports = {
env: 'production',
variables: {
NODE_ENV: 'production',
API_URL: ' /> }
};

在上面的例子中，我们分别配置了开发、测试-开发和生产环境的 `NODE_ENV` 和 `API_URL` 变量。

**使用多环境变量**

现在，让我们来看看如何使用这些多环境变量。我们可以通过 `useConfig()` 方法获取当前环境下的配置，然后通过 `config.variables` 来访问环境变量。

javascript// src/pages/index.jsimport { useConfig } from '@umijs/max';

const config = useConfig();

if (config.env === 'development') {
console.log(config.variables.NODE_ENV); // development console.log(config.variables.API_URL); // else if (config.env === 'testing-development') {
console.log(config.variables.NODE_ENV); // testing-development console.log(config.variables.API_URL); // else {
console.log(config.variables.NODE_ENV); // production console.log(config.variables.API_URL); // />

在上面的例子中，我们使用 `useConfig()` 方法获取当前环境下的配置，然后通过 `config.env` 来判断当前环境。根据环境，我们分别访问不同的环境变量。

**总结**

在本文中，我们学习了如何在 UMI项目中配置多个环境变量。我们创建了一个 `config` 文件夹，并在其中创建多个文件，每个文件对应一个环境。然后，我们使用 `useConfig()` 方法获取当前环境下的配置，然后通过 `config.variables` 来访问环境变量。在实际开发过程中，我们可以根据需要添加更多的环境变量和配置。

**参考**

* UMI 文档： />* UMI 配置文件： UMI 环境变量：