两个umijs/max项目使用微前端简单示例

本人使用umijs/max搭建项目（内置了qiankun插件）

主应用

.umirc.ts中defineConfig

 qiankun: {master: {apps: [{name: 'app1',entry: '//localhost:8000',},],},},routes: [{path: '/',redirect: '/home',},{name: 'app1',path: '/app1',microApp: 'app1',},],

子应用

.umirc.ts中defineConfig

qiankun: {slave: {},},

package.json中

安装
yarn add cross-env

写子应用的id并且规定子应用打开的端口

"name": "app1",
"dev": " cross-env PORT=8000 max dev",

主应用我的端口是8001：http://localhost:8001/app1(便可以查看微应用)
其他配置参照官网

两个umijs/max项目使用微前端简单示例相关推荐

antd-design-pro项目引用微前端，使用qiankun实现动态路由加载
官网:微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用,而 qiankun 的诸多设计均是秉持这一原则,如 HTML entry.沙箱.应用间通信等.这样才能确保微应用真正具备独立开发. ...
微前端vue项目实战 -- 乾坤qiankun框架（一）
背景: 公司研发的项目主要是 GIS地图为基础的管理系统,由主体项目(管理业务模块)+ GIS地图应用,由于 GIS地图应用模块会在多个地方使用,所以单独构建一个项目,分别在不同的业务场景中引用.交 ...
听说你还不了解微前端？[收藏=学会]
一.自我介绍 qiankun 简介首先开始之前,我先给大家简单的介绍一下乾坤,大家可以在 <qiankun.umijs.org> 的官网上,看到 qiankun 的介绍和 qiankun ...
微前端系列讲解--应用集成方案（qiankun+umi+vue）
1. 微前端项目架构及选型介绍 1.1. 微前端选型概述微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.考 ...
微前端在得物客服域的实践/那么多微前端框架，为啥我们选Qiankun + MF
一.业务背景当前客服一站式工作台包含在线服务.电话.工单和工具类四大功能,页面的基本结构如下: 每个业务模块相对独立,各有独立的业务体系,单个模块体积较大,项目整体采用SPA + iframe的架构 ...
iframe 接班人-微前端框架 qiankun 在中后台系统实践
「福利」 ✿✿ ヽ(°▽°)ノ ✿:文章最后有抽奖,转转纪念 T 恤,走过路过不要错过哦背景在转转的中台业务中,交易流转.业务运营和商户赋能等功能,主要集中在两个系统中(暂且命名为 inner/o ...
Bifrost微前端框架及其在美团闪购中的实践
Bifrost(英 ['bi:frɔst])原意彩虹桥,北欧神话中是连通天地的一条通道.而在漫威电影<雷神>中,Bifrost是神域--阿斯加德(Asgard)的出入口,神域的人通过它自由 ...
乾坤微前端_最全汇总之微前端知识和实战（EMP技术方案）
我们团队在早早聊的B站直播间分享了EMP微前端---团队半年以来的技术果实.分享的内容全在这里,会讲述微前端的由来,解决的问题,以及EMP微前端方案的不同之处,更有四个实战项目的总结,欢迎大家一起探讨 ...
iframe微前端架构
项目介绍 demo演示:notes.jindll.com/frame github:https://github.com/niuyueyang/iframeVue 项目可以分为两部分,一部分是统一的登 ...

两个umijs/max项目使用微前端简单示例

主应用

子应用

两个umijs/max项目使用微前端简单示例相关推荐

最新文章

热门文章