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 区分不同环境来指定配置。
1741 0
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
5017 1
如何在 Umi 中使用 Keep Alive
|
存储 移动开发 缓存
uniapp本地存储的几种方式
uniapp本地存储的几种方式
2089 0
antd-procomponent中编辑表格动态数据设置的使用
antd-procomponent中编辑表格动态数据设置的使用
949 0
|
存储 缓存 移动开发
|
移动开发 小程序
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
|
8月前
|
人工智能 监控 Java
Spring AI Alibaba实践|后台定时Agent
基于Spring AI Alibaba框架,可构建自主运行的AI Agent,突破传统Chat模式限制,支持定时任务、事件响应与人工协同,实现数据采集、分析到决策的自动化闭环,提升企业智能化效率。
Spring AI Alibaba实践|后台定时Agent
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
2450 3
antd table合并行或者列(动态添加合并行、列)
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
6497 4
 ECharts词云图(案例一)+配置项详解
|
JavaScript 安全 Java
【绝密攻略】揭秘Spring Boot与Ant Design Pro Vue的终极结合:打造梦幻般的动态路由与菜单管理,颠覆你的前后端分离世界!
【8月更文挑战第9天】随着前后端分离趋势的发展,构建高效且易维护的框架至关重要。本文介绍如何利用Spring Boot与Ant Design Pro Vue打造带有动态路由和菜单的应用。首先需安装Node.js、NPM及Java开发工具;接着通过Spring Initializr初始化含Web和Security依赖的项目,并配置Spring Security。后端API提供菜单数据,而前端则基于这些数据动态生成路由和菜单。通过具体步骤演示整个流程,包括创建Controller、配置动态路由、设置菜单等。此外还分享了实践心得,强调版本兼容性、安全性等方面的重要性。
834 1