最近在研究qiankun，记录自己写入的一些东西，后续也会把遇到的问题都整理出来
接入的方式基本跟官网一样的，我自己做了一些摘录方便后面用
后面也会根据公司的需求，逐步实现一个完整的项目，也会把后续的代码都整理出来

主子应用都是vue的接入方式

主应用

安装

// 安装qiankun
yarn add qiankun -S

接入

主应用

// main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:9000',
    container: '#appContainer',
    // vue主应用路由模式为hash的情况下，路径匹配一定要加#
    activeRule: '#/qiankun-vue',
  },
]);

start();

<!-- qiankun.vue -->
<template>
  <div class="container">
    <div class="header">this is an main header</div>
    <!-- 挂载成功后这里面的1会被替换掉 -->
    <div id="appContainer">1</div>
  </div>
</template>

子应用

// vue.config.js
const { name } = require('./package');
// 固定运行的端口号，运行项目的时候主应用不需要频繁的改
const port = 9000
module.exports = {
  devServer: {
    port,
    headers: {
    // 要配置跨域，不然从主应用加载子应用资源的时候就会提示跨域错误
      'Access-Control-Allow-Origin': '*',
    }
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  }
}

需要新建一个文件public_path.js文件，放在src目录下

// src/public_path.js

/* eslint-disable */ // 防止语法报错
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import '@/public-path'
import router from '@/router'
Vue.config.productionTip = false
//几个生命周期
export async function bootstrap() {
  console.log('vue qiankun app bootstraped');
}
export async function mount(props) {
// 子应用的情况下，挂载成功后运行render函数，需要把props传进去
  console.log('[vue] props from main framework', props);
  console.log('子应用')
  render(props);
}
export async function unmount() {
  console.log('vue qiankun app unmount');
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}
let instance = null
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
// 子应用独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}