VUE项目如何使用qiankun搭建微前端架构

最近，在做前端微应用时候用到了qiankun 框架，因此对使用中遇到的问题做了总结。

微前端其实就是：一个完整应用划分成一个主应用和一个或多个微应用，应用间相互独立，可相互通信。

qiankun的官方文档：https://qiankun.umijs.org/zh/api

当主应用是 hash 模式时，一般微应用也是 hash 模式。主应用的一级 hash 路径会分配给对应的微应用（比如 #/base1 ），此时微应用如果需要在 base 路径的基础上进行 hash 模式下的二级路径跳转（比如 #/base1/child1 ），这个场景在当前 VueRouter 的实现方式下需要自己手动实现，给所有路由都添加一个前缀即可。VueRouter 的 hash 模式下的 base 参数不支持添加 hash 路径 base。

一：使用history 模式（qiankun官方也是介绍的history模式）

    ① 对主应用进行改造即 安装使用qiankun   

        主应用项目必须安装 qiankun：npm i qiankun -S

        在主应用的src文件夹下新建一个 micros 文件夹，在micros文件夹新建index.js、app.js

   1.index.js —— 主要是导出方法及生命周期钩子，用于在主应用中注册微应用 

import {
  registerMicroApps,
  addGlobalUncaughtErrorHandler,
  start
} from 'qiankun'// 微应用注册信息
import apps from './app'

// （1）registerMicroApps：包含两个参数，第一个参数是微应用的一些注册信息，第二个参数是全局的微应用生命周期钩子。:
// （2）addGlobalUncaughtErrorHandler：全局的未捕获异常处理器，微应用发生报错的时候亦可以用这个api捕捉。
// （3）start：我们用来启动qiankun的方法，包含一个参数，具体的参数用途不再详述。
registerMicroApps(apps, {
  beforeLoad: (app) => {
    console.log('before load====&#