微前端：使用qiankun框架的注意点

主应用技术点

RegistrableApp 函数参数

registerMicroApps([{name: "vue2 app 1", //子应用名称entry: "//localhost:10001", //子应用端口号container: "#v2-app-1", //子应用挂载的元素activeRule: "/v2-app-1", //子应用路径匹配规则，匹配其中一个则渲染对应子应用props: {params1: "zs",params2: 123,params3: {name: "zs",age: 15,},},},{name: "vue2 app 2",entry: "//localhost:10002",container: "#v2-app-2",activeRule: "/v2-app-2",},
]);

name 值唯一
当浏览器 url 发生变化时，会自动检查每一个微应用注册的 activeRule 规则，符合规则的应用将会被自动激活

start 启动项目

setDefaultMountApp

初始化完成后进入默认的子应用

runAfterFirstMounted

第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。

注意： qiankun 官网暂不支持 vite 打包的项目

解决方案：使用 vite-plugin-qiankun 包，暂未使用过，不过看有部分人是使用的这个

微前端：使用qiankun框架的注意点相关推荐

目标是最完善的微前端解决方案 - qiankun 2.0
距 qiankun 开源已过去了 11 个月,距上次官方发声已过去 8 个月. Announcing qiankun@2.0 2019 年 6 月,微前端框架 qiankun 正式发布了 1. ...
微前端之qiankun
qiankun 前言 bug qiankun实战总结 qiankun中的沙箱机制前言 qiankun 框架是基于single-spa框架的,所以遵循的协议都一样,也是向外暴露三个钩子函数,但是qi ...
微前端之 qiankun 入门、上手、实战（构建大型 web 应用）
目录前言正文一.介绍微前端 qiankun 二.快速上手 ☛主应用 ① 安装 qiankun ② 在主应用中注册微应用 ☛微应用 ① 导出相应的生命周期钩子 ② 配置微应用的打包工具三. ...
qiankun 微前端_微前端方案 qiankun（实践及总结）
❝ 作者:沉末_ 链接:https://juejin.im/post/5ed73b73e51d4578724e3fa4 ❞ 什么是微前端? 我们先来看两个实际的场景: 1. 复用别的的项目页面通常, ...
微前端-乾坤qiankun
2019-2020年前端最火的技术之一:微前端微前端究竟是什么? 微前端是近三年前端社区比较火的技术方案,试图把拆分大型后端系统的一些益处引入前端. 微前端就是将不同的功能按照不同的维度拆分成多个子 ...
微前端——乾坤qiankun Demo
微前端--qiankun(乾坤)实例一.什么是微前端微前端就是将不同的功能按照不同的维度拆分成多个子应用.通过主应用来加载这些子应用.微前端的核心在于拆,拆完后在合! 二.为什么使用微前端不同团 ...
微前端（qiankun）
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略.. 微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员.团队的增多.变迁,从 ...
微前端：qiankun的两种运作模式
背景微前端 qiankun 有两种运作模式: 1.使用 registerMicroApps + start,这是挂自动档,路由改变,重新load子应用. 2.使用 loadMicroApp,每次路由 ...
微前端阿里qiankun
阿里乾坤官网阿里乾坤demo:summer-qiankun-admin
微前端在得物客服域的实践/那么多微前端框架，为啥我们选Qiankun + MF
一.业务背景当前客服一站式工作台包含在线服务.电话.工单和工具类四大功能,页面的基本结构如下: 每个业务模块相对独立,各有独立的业务体系,单个模块体积较大,项目整体采用SPA + iframe的架构 ...

微前端：使用qiankun框架的注意点

主应用技术点

RegistrableApp 函数参数

start 启动项目

setDefaultMountApp

runAfterFirstMounted

注意： qiankun 官网暂不支持 vite 打包的项目

微前端：使用qiankun框架的注意点相关推荐

最新文章

热门文章