Umi前端框架设置多环境

除了 dotenv 之外，还有许多其他方法可以实现多环境配置。特别是针对不同的框架，会有更合适的方法。比如你使用的是 Umi 框架，Umi 提供了内置的管理多环境配置的支持。

使用 Umi 配置多环境支持

Umi 框架本身就支持根据不同的环境进行配置。通常通过 config/config.[env].js 文件来实现多环境配置。在 Umi 框架中，这些配置文件会根据不同的环境变量自动加载。

基本步骤

1. 创建环境配置文件：
   在 Umi 项目的 config 目录下创建针对不同环境的配置文件。例如：

   • config/config.dev.js
   • config/config.prod.js
   • config/config.test.js

   每个文件中导出相应的配置。例如：

   // config/config.dev.js
   export default {
     define: {
       'process.env.API_URL': 'http://localhost:3000/api',
     },
   };
   
   // config/config.prod.js
   export default {
     define: {
       'process.env.API_URL': 'https://production-url.com/api',
     },
   };
   
   // config/config.test.js
   export default {
     define: {
       'process.env.API_URL': 'http://test-url.com/api',
     },
   };
   

2. 启动项目时指定环境：

   Umi 会基于 NODE_ENV 加载相应的配置文件。可以通过以下命令启动项目：

   # 启动开发环境
   cross-env UMI_ENV=dev umi dev
   
   # 启动生产环境
   cross-env UMI_ENV=prod umi build
   
   # 启动测试环境
   cross-env UMI_ENV=test umi test
   

   注意：你可能需要安装 cross-env 来跨平台设置环境变量。

   npm install cross-env --save-dev
   

3. 在代码中引用环境变量：

   你可以像平常一样在代码中引用环境变量。例如：

   const apiUrl = process.env.API_URL;
   console.log(apiUrl); // 对应环境的 API URL
   

完整的示例代码

假设你有一个简单的 Umi 应用，目录结构如下：

my-umi-app/
├── config/
│   ├── config.dev.js
│   ├── config.prod.js
│   └── config.test.js
├── src/
│   ├── pages/
│   │   └── index.js
├── .umirc.js
├── package.json
└── ...

各个配置文件内容如下：

config/config.dev.js：

export default {
  define: {
    'process.env.API_URL': 'http://localhost:3000/api',
  },
};

config/config.prod.js：

export default {
  define: {
    'process.env.API_URL': 'https://production-url.com/api',
  },
};

config/config.test.js：

export default {
  define: {
    'process.env.API_URL': 'http://test-url.com/api',
  },
};

在你的代码中可以使用这些环境变量：

src/pages/index.js：

import React from 'react';

const IndexPage = () => {
  console.log(process.env.API_URL);
  return (
    <div>
      <h1>API URL: {process.env.API_URL}</h1>
    </div>
  );
};

export default IndexPage;

启动和打包命令：

# 启动开发环境
cross-env UMI_ENV=dev umi dev

# 启动生产环境
cross-env UMI_ENV=prod umi build

# 启动测试环境
cross-env UMI_ENV=test umi test

这种方法使得在不同的环境中可以轻松地配置不同的参数，并且在项目中直接使用这些参数。Umi 框架提供的这个内置功能，使得环境管理更加方便和直观。