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

那什么是 qiankun 呢

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

什么是微前端

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

 技术栈无关

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

 独立开发、独立部署

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

 增量升级

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

 独立运行时

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

摘自 qiankun官方文档

主应用配置

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

下载 qiankun

npm install qiankun 

在主应用中注册微应用

// 导入乾坤函数

import { 

  registerMicroApps,  

  setDefaultMountApp,  

  start  

} from "qiankun"; 

封装 render 方法

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