微前端之qiankun微前端

什么是微前端:

微前端项目是将每一个可以独立开发，测试，部署的子项目集合到一个主项目之下。对于用户来说，主项目仍然是一个完整的产品，而整个组装的过程对于用户来说，是透明的。

微前端不仅仅可以兼容不同的开发环境还可以兼容技术栈。可以做到更大程度的解耦合。

spa网页

SPA整体打包应用

微前端网页

微前端网页应用

为什么需要微前端：

1. 当前应用较大，需要拆解开独立开发
2. 多业务团队，独立开发同一个项目
3. 集合式的中台项目等项目需要
4. 同一个项目内需要兼容不同的架构项目。如主应用下包含：Vue项目，React项目，还有Angular项目。

微前端的特点：

1. 任意的JS框架都可以兼容使用，接入简单。
2. 解决iframe主页面刷新后，无法控制子页面的路由问题
3. 更好的解决主应用和子应用的通信问题

为什么不是iframe

1. iframe通过src嵌入，当子页面的页面内发生路由的跳转后。主页面再次刷新就会使主页面回到初始位置。
2. 内嵌页和主页面通信问题，通过postMessage和url，url传参本身不够安全
3. 内嵌页之间的通信问题
4. dom结构的不共享，内嵌入如果需要出现一个遮罩加上loading，主页面很难做出相应的动作

qiankun微前端，微前端的落地实现

qiankun的特点：

1. 基于 single-spa 封装，提供了更加开箱即用的 API。import { registerMicroApps, start } from 'qiankun'; registerMicroApps( { name: 'vueApp', // app的name，需要与微应用打包对应 entry: '//localhost:8081', // 微应用的端口，同时微应用需要启动 container: '#app2, activeRule: '/mydemo', // 如果是 hash模式 需要 #/mydemo } );

// 启动 qiankun

start();主应用路由如果是http://localhost:8080 那么 http://localhost:8080/mydemo 就会拉起微应用。

1. 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
2. HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
3. 样式隔离，确保微应用之间样式互相不干扰。
4. JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
5. 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

配置参考https://qiankun.umijs.org/

配置项细节和踩坑

微应用需要启动

微应用需要独立的启动，且配置的端口和主应用注册的微应用端口一致

主应用

主应用配置微应用入口

entry端口需要与微应用一致，同时微应用需要运行

微应用的路由以及路由跳转

假设 是两个 vue的应用

主应用

主应用界面

错误情况：当子页面路由没有添加前缀(activeRule)

{
path: '/',
name: 'Home',
component: Home
}

显示效果

image.png

正确情况

{
path: '/subvue/',
name: 'Home',
component: Home
}

path为 微应用的激活规则

image.png

正确的路由跳转

image.png

子应用的跳转需要加入前缀！！

history模式下设置路由更方便

微应用渲染时 在base上设置微应用的范围

  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/subvue/' : '/',
    mode: 'history',
    routes
  })

此时，所有的子路由内的跳转，会加上 /subvue/所以 routers内 则不需要手动加上前缀

image.png

hash模式下，打包发布正式需要处理的更少！！

部署线上