从零搭建qiankun

在说qiankun之前先了解下Single-spa ,Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 使用 single-spa 进行前端架构设计可以带来很多好处，例如:

在同一页面上使用多个前端框架 而不用刷新页面 (Vue,React, AngularJS, Angular, Ember, 你正在使用的框架)
独立部署每一个单页面应用
新功能使用新框架，旧的单页应用不用重写可以共存
改善初始加载时间，迟加载代码
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，该团队将其微前端内核抽取出来并开源。

qiankun包含的特性

基于single-spa
基于无关
html entry 方式模式
样式隔离
js 沙箱
资源预取

搭建基座

vue create main-project
npm i qiankun -S

在基座中注册微应用

main.js目录中配置以下

import { registerMicroApps, addGlobalUncaughtErrorHandler, start } from 'qiankun';

const apps = [
  {
    name: 'ManageMicroApp', // 微应用名称
    entry: 'http://localhost:30000', // 开发环境配置的路由，生产环境需替换成对应的nginx配置
    container: '#container', // 挂载的dom节点
    activeRule: '/branch_demo', // 激活的路径
  },
]

/**
 * 注册微应用
 */
registerMicroApps(apps);

/**
 * 添加全局的未捕获异常处理器
 */
addGlobalUncaughtErrorHandler((event: Event | string) => {
  console.error(event);
  const { message: msg } = event as any;
  // 加载失败时提示
  if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
    console.error("微应用加载失败，请检查应用是否可运行");
  }
});

start();

也可以选择手动加载微应用的方式：

import { loadMicroApp } from 'qiankun';
loadMicroApp({
  name: 'ManageMicroApp', // 微应用名称
    entry: 'http://localhost:30000', // 开发环境配置的路由，生产环境需替换成对应的nginx配置
    container: '#container', // 挂载的dom节点
    activeRule: '/branch_demo', // 激活的路径
});

搭建微应用

vue create branch-project

main.js中配置

let instance = null;
// Vue.config.productionTip = false

// 如果子应用独立运行则直接执行render
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
/**
 * 渲染函数
 * 主应用生命周期钩子中运行/子应用单独启动时运行
 * #app2是为了不和主应用id冲突
 */
function render(props) {
  // 挂载应用
  instance = new Vue({
    router,
    render: (h) => h(App)
  }).$mount('#app2');
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap () {}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount (props) {
  console.log('props',props);
  render(props)

  if (process.env.NODE_ENV === 'development') {
    window.__QIANKUN_SUB_APP_VM__ = instance
  }
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount () {
  instance.$destroy()
}

/**
 * 解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。
 */
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

微应用打包配置

module.exports = {
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  devServer: {
    port: 30000,
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
  },
  configureWebpack:{
    output: {
      library: `vue_demo`,
      libraryTarget: 'umd'
    },
  }
};

修改微应用id名称，目录（public\index.html）
id=“app2”

主应用跳转（路由模式：hash）

     window.history.pushState({}, null, '/vue_demo/#/about')

参考文档：https://juejin.cn/post/6981339862901194759#heading-11