qiankun 笔记

主应用

1.安装qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2.在主应用中注册微应用

在入口文件（main.js中）

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import { registerMicroApps, start } from "qiankun"

Vue.config.productionTip = false

new Vue({
    router,
    render: (h) => h(App),
}).$mount("#app")

registerMicroApps([
    {
        name: "vueApp", // 微应用的名称，微应用之间必须确保唯一
        entry: "//localhost:8080", // 微应用的入口
        container: "#container",  // 微应用的容器节点的选择器或者 Element 实例,可以将主应用的app的id设置为container
        activeRule: "/app-vue",  // 微应用的激活规则。
       // 例如：http://localhost:8081/app-vue
    },
])
// 启动 qiankun
start()

微应用

1. 导出相应的生命周期钩子

微应用需要在自己的入口 js (通常就是main.js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
Vue.config.productionTip = false

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

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

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount (props) {
    console.log("[vue] props from main framework", props)
    render(props)
}

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

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update (props) {
    console.log("update props", props)
}

router配置

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/",
    mode: "history",
    routes,
})

export default router

2. 配置微应用的打包工具

除了代码中暴露出相应的生命周期钩子之外，为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：(vue.config.js)

const { name } = require('./package')
module.exports = {
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`,
        },
    },
}