搭建步骤

一、主应用搭建

1. 安装 npm i qiankun -S (我用的2.7.0)

2. 主应用注册子应用

   新建文件singSpa.js
   import { registerMicroApps, start, } from "qiankun"
   export default function (apps: []) { 
       registerMicroApps(apps, 
       { 
       beforeLoad: () => { // 加载微应用前}, 
       beforeMount: () => { // 渲染微应用前}, 
       afterMount: () => {}, 
       }); 
       // 是否开启预加载，配置为 true 会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源
       start({prefetch:false,jsSandbox:true})
   }
   

    调用配置（我是在layout的router-view处调用的）
    import startQiankun from "@/singSpa"; 
    const apps=[{
        name:'xx-app',//跟子应用package的name保持一致
        entry:'//localhost:8081',//子应用入口
        container:'#appContainer',//微应用挂载节点
        activeRule:'#/xx-app',//微应用触发的路由规则
        props:{...},//传递给子应用的数据（共享状态也可以使用initGlobalState传递）
    }]
    if(!window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__){
        startQiankun(apps)
    }else{
        location.reload()
    }
            
   

二、子应用搭建

    **main.js添加**
    export async function bootstrap(props={}){
    }
    //应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
    export async function mount(props){
        render(props)
    }
    //应用每次 切出/卸载 会调用的方法，通常在这会卸载微应用的应用实例
    export async function unmount(){
    instance.$destroy() //instance=new Vue(...)
    instance=null
    }
    if(!window.__POWERED_BY_QIANKUN__){
    //子应用独立运行时
     render()
    }

**vue.config.js配置**
module.exports={
    publicPath:'//localhost:8081',
    devServer:{
    port:8081,
    // 关闭主机检查，使微应用可以被 fetch 
    disableHostCheck: true,
    // 配置跨域请求头，解决开发环境的跨域问题
    headers:{
        "Access-Control-Allow-Origin": "*",
    },
    configureWebpack: { 
        resolve: { alias: { "@": path.resolve(__dirname, "src"), }, },
        output: { 
            // 微应用的包名，这里与主应用中注册的微应用名称一致 
            library: "xx-app", 
            // 将你的 library 暴露为所有的模块定义下都可运行的方式 
            libraryTarget: "umd", 
            // 按需加载相关，设置为 webpackJsonp_${appName}
            jsonpFunction: `webpackJsonp_xx-app`, 
        }, 
    },
}

三、遇到的问题：

• Application died in status NOT_MOUNTED: Target container with #container not existed while xxx mounting!-----主应用跟子应用的app.vue 的id不能一样
• Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading-----container的id没找着，犯了一个愚蠢的错误，写成了id="#xxx"!
• 主子应用 props 引入无效--因为子应用main.js导出了vue实例是在bootstrap生命周期前 ，就生成了实例----别导出就行了
• 子应用会影响主应用某些页面样式----后面加了点什么东西自动修复了---
• 路由的改造 采用hash模式，子主应用同时启动时，子应用devserver的代理不生效----写在请求配置文件里面，判断window.POWERED_BY_QIANKUN 独立运行与作为子应用时分情况

• vue项目router报错：TypeError: _router.default.addRoute is not a function---换个vue-router 版本号就行了 3.5.1