umi如何配置环境变量

简介: umi如何配置环境变量


前言

通常情况下,一个项目区分开发环境,测试环境,生产环境,那么umi如何添加环境变量来区分当前环境呢?

安装cross-env

因为要修改package.json的script命令,为了兼容OS X和Windows系统,所以需要借助cross-env

npm i cross-env -S

修改package.json

npm 命令:

  • cross-env 兼容OS X和Windows系统
  • UMI_ENV=dev 指定环境变量值
  • umi dev 运行本地开发服务
  • umi build 打包
"scripts": {
    "start": "cross-env UMI_ENV=dev umi dev",
    "uat": "cross-env UMI_ENV=uat umi build",
    "sit": "cross-env UMI_ENV=sit umi build",
    "build": "cross-env UMI_ENV=prod umi build",
  },

创建对应的umirc.ts

先看看官网介绍

意思是会根据UMI_ENV的值来选择哪一个.umirc.xxx.ts的配置,并且会和.umirc.ts做深比较,对配置进行合并

因此根据我们修改的package.json,我们需要创建对应的.umirc.xxx.ts

  • .umirc.dev.ts
export default {
  define: {
    'process.env.UMI_ENV': 'dev',
  }
}
  • .umirc.uat.ts
export default {
  define: {
    'process.env.UMI_ENV': 'uat',
  }
}
  • .umirc.sit.ts
export default {
  define: {
    'process.env.UMI_ENV': 'sit',
  }
}
  • .umirc.prod.ts
export default {
  define: {
    'process.env.UMI_ENV': 'prod',
  }
}

项目中,直接使用process.env.UMI_ENV变量,即可获取当前处于哪个环境

console.log(process.env.UMI_ENV);
目录
相关文章
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1830 0
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
5144 1
如何在 Umi 中使用 Keep Alive
|
小程序
uni-app:网络状态监测之onNetworkStatusChange与getNetworkType的区别与应用
1、在实际项目开发中,难免涉及到监测网络,下面来具体了解下小程序两种监测网络的方法。 2、这里配置的是 uniapp,微信小程序把 uni. 换成 wx. 即可。
2706 0
uni-app:网络状态监测之onNetworkStatusChange与getNetworkType的区别与应用
|
7月前
|
人工智能 文字识别 测试技术
API 视角:Gemini 3.1 Flash (Nano Banana 2) 图像生成能力基准测试
本文基于Nano Banana AI实测,评测Gemini 3.1 Flash图像生成能力:在Prompt遵循度(精准颜色绑定)、OCR文本生成(端到端可读路牌)、高分辨率细节(2K无伪影)三方面表现优异,具备高准确度、原生多模态与低延迟(<10s),适合广告、游戏资产及合成数据等云上生产场景。
892 4
|
机器学习/深度学习 人工智能 自然语言处理
DeepRant:一款专为国际游戏玩家设计的翻译工具,一键翻译聊天对话,无需切出游戏
专为游戏玩家设计的多语言快捷翻译工具,支持多种翻译模式和主流语言,基于Tauri和React开发。
1731 12
DeepRant:一款专为国际游戏玩家设计的翻译工具,一键翻译聊天对话,无需切出游戏
|
运维 供应链 数据可视化
基于开源软件的场景式教学:高职院校培养学生创新能力的新模式
在数字化转型与产教融合背景下,高职教育正从“知识传授”向“能力塑造”转变。开源软件以其开放性、灵活性和低成本特性,成为推动场景式教学的重要工具。本文探讨了通过开源软件构建沉浸式、项目驱动的教学模式,分析其技术路径与价值。例如,Websoft9等平台提供预置模板和“开箱即用”功能,助力学生快速进入实践阶段。结合虚拟仿真技术与AIGC,教学突破传统限制,培养跨学科创新思维。案例显示,该模式显著提升学生创新能力与就业竞争力。未来需深化“开源工具+产业标准”资源库建设,推动校企共建开源社区,强化教师技术整合能力,为创新型人才培养注入持续动力。
|
人工智能 前端开发 程序员
通义灵码2.0深度评测:当AI程序员握住我的手写代码
体验通义灵码2.0 AI程序员:Deepseek智能编码的魅力
766 4
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
2609 3
antd table合并行或者列(动态添加合并行、列)