乾坤 微前端_微前端 qiankun 项目实践 !!! 防踩坑指南

作者：zxh1307

导语

最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈.  在此次将采坑部分都记录下来, 让更多的人少走点弯路 ,   此项目使用 蚂蚁金服qiankun 为基础作为开发 . 话不多说 开讲 !!!

那什么是 qiankun 呢

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

什么是微前端

微前端架构具备以下几个核心价值：

• 技术栈无关

  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署

  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时

  每个微应用之间状态隔离，运行时状态不共享

摘自 qiankun官方文档

主应用配置

此次项目 主应用与 子应用均为 vue ,

下载 qiankun

npm install qiankun

在主应用中注册微应用

// 导入乾坤函数
import {
    
  registerMicroApps,
  setDefaultMountApp,
  start
} from "qiankun";

封装 render 方法

此方法在main.js 中要初始调用一次, 主要用来挂载主应用 , 之后子应用分别依次调用 ,所以故作判断. 传入的参数分别为 子应用 的 HTML 和 加载状态 content 字段 我们用 vuex 存储 起来,方便使用

let app = null;

function render({ appContent, loading }) {
    
  if (!app) {
    
    app = new Vue({
    
      router,
      store,
      render: h => h(App),
    }).$mount('#app');
    
  } else {
    
    store.commit('microApp/changeCenter', appContent);
    store.commit('microApp/changeLoading', loading);
  }

}

</