umi环境变量配置：开发、测试、生产环境隔离

umi环境变量配置：开发、测试、生产环境隔离

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi

你还在为开发、测试、生产环境的配置混乱而头疼吗？不同环境需要不同的API地址、服务端口和功能开关，手动切换既繁琐又容易出错。本文将带你一步掌握umi框架的环境变量配置方案，实现各环境完美隔离，让部署上线不再手忙脚乱。

读完本文你将学会：

• 如何创建多环境配置文件
• 环境变量在代码中的使用技巧
• 开发/测试/生产环境的快速切换
• 常见场景的配置最佳实践

环境隔离基础：UMI_ENV变量

umi通过UMI_ENV环境变量实现多环境配置文件的加载，这是实现环境隔离的核心机制。官方文档详细说明了这一特性：docs/guide/env-variables.md

配置文件命名规范

.umirc.js           # 基础配置，所有环境共享
.umirc.dev.js       # 开发环境配置，覆盖基础配置
.umirc.test.js      # 测试环境配置，覆盖基础配置 
.umirc.prod.js      # 生产环境配置，覆盖基础配置

提示：也可以使用config/config.js系列文件，目录结构更清晰

配置加载优先级

umi的配置加载遵循以下优先级（从高到低）：

1. 命令行参数
2. 环境变量指定的配置文件（如.umirc.prod.js）
3. 基础配置文件（.umirc.js）
4. 默认配置

多环境配置实战

1. 创建环境配置文件

首先在项目根目录创建以下文件：

# 基础配置
touch .umirc.js
# 开发环境配置
touch .umirc.dev.js
# 测试环境配置
touch .umirc.test.js
# 生产环境配置
touch .umirc.prod.js

2. 配置文件内容示例

基础配置文件 .umirc.js：

export default {
  title: '我的应用',
  // 所有环境共享的配置
  plugins: [
    // 通用插件
  ],
}

开发环境配置 .umirc.dev.js：

export default {
  // 仅开发环境启用mock
  mock: true,
  // 开发环境API地址
  define: {
    'process.env.API_URL': 'http://dev.api.example.com',
  },
}

生产环境配置 .umirc.prod.js：

export default {
  // 生产环境禁用mock
  mock: false,
  // 生产环境API地址
  define: {
    'process.env.API_URL': 'https://api.example.com',
  },
  // 生产环境启用代码压缩
  compress: true,
}

3. 配置package.json脚本

编辑根目录下的 package.json 文件，添加环境切换脚本：

{
  "scripts": {
    "start": "umi dev",
    "start:test": "cross-env UMI_ENV=test umi dev",
    "build:test": "cross-env UMI_ENV=test umi build",
    "build:prod": "cross-env UMI_ENV=prod umi build",
    "analyze": "cross-env ANALYZE=1 UMI_ENV=prod umi build"
  }
}

注意：需要先安装cross-env依赖以支持跨平台环境变量设置：npm install cross-env --save-dev

常用环境变量速查表

变量名	作用	适用场景
UMI_ENV	指定环境配置文件	环境隔离核心
PORT	设置开发服务器端口	本地开发冲突解决
PUBLIC_PATH	静态资源路径	CDN部署
MOCK	开关mock服务	联调测试
ANALYZE	构建产物分析	性能优化
COMPRESS	代码压缩开关	生产环境优化

临时覆盖环境变量

在命令行直接添加环境变量可以临时覆盖配置：

# 开发环境指定端口
cross-env PORT=3000 UMI_ENV=dev umi dev

# 构建时禁用代码压缩
cross-env COMPRESS=none UMI_ENV=prod umi build

代码中使用环境变量

在组件或业务逻辑中，可以直接访问通过define配置的环境变量：

// API请求示例
fetch(`${process.env.API_URL}/users`)
  .then(response => response.json())
  .then(data => console.log(data));

// 环境判断示例
if (process.env.NODE_ENV === 'development') {
  console.log('开发环境特殊逻辑');
}

注意：NODE_ENV是umi自动设置的，无需手动配置，值为development或production

部署流程最佳实践

完整部署流程示意图

CI/CD集成建议

在CI/CD流程中，可以通过设置UMI_ENV实现自动部署不同环境：

# Jenkins Pipeline示例
stage('构建测试环境') {
  steps {
    sh 'npm run build:test'
  }
}

stage('构建生产环境') {
  steps {
    sh 'npm run build:prod'
  }
}

常见问题解决

Q: 环境变量不生效怎么办？

A: 检查以下几点：

1. 确认UMI_ENV是否正确设置
2. 配置文件是否放在项目根目录
3. 使用define配置的变量需要以process.env.开头
4. 修改配置后需要重启开发服务器

Q: 如何在HTML模板中使用环境变量？

A: 在HTML模板文件中可以直接使用<%= ENV %>语法：

<!-- src/pages/document.ejs -->
<title><%= context.config.title %></title>
<script>
  window.API_URL = '<%= process.env.API_URL %>';
</script>

总结与扩展阅读

通过本文介绍的环境变量配置方案，你已经可以实现开发、测试、生产环境的完美隔离。核心要点是：

1. 使用UMI_ENV指定环境配置文件
2. 通过define注入环境变量到代码中
3. 在package.json中配置环境切换脚本
4. 结合CI/CD实现自动化部署

进一步学习建议：

• 官方配置文档：docs/guide/config.md
• 构建优化指南：docs/guide/deploy.md
• 高级路由配置：docs/guide/router.md

希望本文能帮助你解决环境配置的痛点，让项目部署更加顺畅！如果觉得有用，别忘了点赞收藏，关注作者获取更多umi实用技巧。下期我们将介绍umi插件开发实战，敬请期待！

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi