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如何配置环境变量
1201 0
|
前端开发 开发者
Umi 4 特性 02:React Router 6 和新路由
Umi 4 特性 02:React Router 6 和新路由
1577 0
|
移动开发 前端开发 Android开发
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
3496 0
|
2月前
|
人工智能 前端开发 测试技术
Qoder Skills 完全指南:从零开始,让 AI 按你的标准执行
文章内容基于作者个人技术实践与独立思考,旨在分享经验,仅代表个人观点。
2538 3
|
JavaScript
iframe的父子页面通信
iframe的父子页面通信
851 6
|
Web App开发 前端开发 Android开发
svg图标无法修改颜色的解决方案
svg图标无法修改颜色的解决方案
|
JavaScript
tailwindcss使用教程
【8月更文挑战第1天】
981 3
|
前端开发 NoSQL 安全
浅谈 前端验证码那些事
浅谈 前端验证码那些事
1123 0
|
索引 搜索推荐 自然语言处理
“搜索”的原理,架构,实现,实践,面试不用再怕了(值得收藏)!!!
可能99%的同学不做搜索引擎,但99%的同学一定实现过检索功能。搜索,检索,这里面到底包含哪些技术的东西,希望本文能够给大家一些启示。
1708 0