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 区分不同环境来指定配置。
1619 0
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
4613 1
如何在 Umi 中使用 Keep Alive
antd-procomponent中编辑表格动态数据设置的使用
antd-procomponent中编辑表格动态数据设置的使用
708 0
|
JavaScript 前端开发
若依框架文档开发手册----开发中常用功能模块(中)
若依框架文档开发手册----开发中常用功能模块
4680 0
|
存储 缓存 移动开发
|
移动开发 小程序
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
1965 3
antd table合并行或者列(动态添加合并行、列)
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
5012 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、配置动态路由、设置菜单等。此外还分享了实践心得,强调版本兼容性、安全性等方面的重要性。
688 1
|
JavaScript 前端开发 开发者
太爽了!这10个 Vite 插件,帮我在开发中节省了大量时间!!
太爽了!这10个 Vite 插件,帮我在开发中节省了大量时间!!