UMI多环境配置

简介: 一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。

一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。

需求:三套环境->本地环境localtest、测试发布环境testbuild、正式环境probuild

1.在根目录新建.umirc.localtest.ts、.umirc.testbuild.ts、.umirc.probuild.ts三个配置文件。

每个文件中按照以下方式定义变量,一般可包括测试账户的账号密码、请求前缀等。

export default {
  define: {
    loginName:'zhangsan',        //登录名
    loginPassword:'****',        //登录密码
    prefix:'',                   //请求前缀
  },
};
  1. 安装cross-env,这个包是可以在跨平台设置环境变量。
package.json文件:
"scripts": {
    "start:localtest": "cross-env UMI_ENV=localtest umi dev",  //设置UMI_ENV为localtest
    "start:testbuild": "cross-env UMI_ENV=testbuild umi dev",
    "start:probuild": "cross-env UMI_ENV=probuild umi dev",
    "build:testbuild": "cross-env UMI_ENV=testbuild umi build",
    "build:probuild": "cross-env UMI_ENV=probuild umi build",
  },

运行npm run start:localtest 即可运行localtest环境 同理其他环境

3.在页面中直接使用变量

console.log(loginName,loginPassword,prefix)

例:

if(!loginName||!loginPassword){
  message.error('登录名或密码为空')
  return
}
let param={
  loginName,
  loginPassword
}
dispatch({
  type: 'loginModal/login',
  payload: {
    param
  },
})

注:如果项目的配置比较复杂,可以将配置写在 config/config.ts 中。

相关文章
|
测试技术 Windows
umi如何配置环境变量
umi如何配置环境变量
820 0
如何在 Umi 中使用 Keep Alive
如何在 Umi 中使用 Keep Alive
4464 0
如何在 Umi 中使用 Keep Alive
|
存储 前端开发 JavaScript
ahooks 正式发布:值得拥抱的 React Hooks 工具库
ahook定位于一套基于 React Hooks 的工具库,核心围绕 React Hooks 的逻辑封装能力,降低代码复杂度和避免团队的重复建设为背景,共同建设和维护阿里经济体层面的 React Hooks 库。
23903 1
ahooks 正式发布:值得拥抱的 React Hooks 工具库
|
移动开发 前端开发 Android开发
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
2773 0
|
移动开发 前端开发 JavaScript
antd popover定位不准闪跳解决+自己实现popover库
我在写H5-dooring时,发现我们用的popover会发生闪跳,而且第一次闪跳就算了,每次还会有另一个方向的闪跳。 于是我大概百度了下,基本都说需要给固定宽高即可,让后试了下发现没用,就算触发组件和弹窗元素都给了宽高,也一样闪跳。由于antd的popover底层的实现是套其他第三方的库,第三方库又用到了其他的前端组件, 所以锁心自己实现一个。
1294 0
|
9月前
|
传感器 人工智能 数据可视化
数字孪生高效赋能,打造水利新质生产力
数字孪生水利运用云计算、大数据、AI、实景三维等技术,实现江河水库等水利工程的可视化展示与智能化模拟。通过三维可视化和实时数据映射,平台提供智能感知、分析、预测和预演功能,支持监测预警、调度优化及灾害预防,助力提升水利管理水平,保障水安全。
|
数据采集 自然语言处理 数据处理
通义灵码在 PyCharm 中的强大助力(上)
本文介绍了阿里云通义灵码与PyCharm结合的强大功能,涵盖安装配置、快速生成代码、优化代码结构等方面,通过实际案例展示了其在Python项目开发中的应用,显著提升开发效率和代码质量。
1656 12
通义灵码在 PyCharm 中的强大助力(上)
|
资源调度 Kubernetes 前端开发
react-intl——react国际化使用方案
react-intl——react国际化使用方案
|
JavaScript 前端开发 开发者
控制台居然可以这么玩?五分钟带你上手ANSI指令,实现一个log工具包
控制台居然可以这么玩?五分钟带你上手ANSI指令,实现一个log工具包
454 1
如何处理代理的404错误
如何处理代理的404错误
3967 8