原理：
主应用某个div下面挂载的是子应用的html文件。
子应用注册：
首先，在finder中安装qiankun工具包。
npm i qiankun -S然后，另起一个appRegister.js, 用于写子应用挂载。
子应用挂载主要用到了 qiankun 包中的 registerMicroApps 和 start 方法。下面是挂载微应用时的配置信息：
import { registerMicroApps, start, runAfterFirstMounted, initGlobalState } from "qiankun"
//检查路由
const checkMicroUrl = (location, urlList) => {
let url = location.hash.indexOf("?") != -1 ? location.hash.split("?")[0] : location.hash // 增加路由带query查询参数判断
const routerName = url.substring(2)
return urlList.includes(routerName)
}
const config = [{
name: 'activity',
entry: '//localhost:7100',
container: '#subapp-viewport',
activeRule: () => {
return checkMicroUrl(location, ['myActivity', 'ourActivity'])
},
}
]
registerMicroApps(
config,
{
beforeLoad: [
app => {
}
],
beforeMount: [
app => {
}
],
afterUnmount: [
app => {
}
]
}
)
/**
* Step3 启动应用
*/
start()接着，在finder的main.js文件中引入 appRegister.js
import './utils/appRegister.js'子应用挂载：
找到挂载子应用的组件，加一个div，id是 subapp-viewport，用来挂载子应用
比如项目中，子应用挂载到home组件下：
主应用中路由：
{
path: '/myActivity', //匹配微应用跳转
name: 'activity',
component: import('@/components/home.vue'),
meta: {
isMicroApp: true
}
},这样就配置好了主应用，当访问的是https://test.kk.com/#/myActivity时，就会命中微应用，#subapp-viewport的div里就会渲染子应用
子应用配置：
重新创建一个空的vue项目，在其main.js顶部引入qiankun官网需要引入的public-path.js文件
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}main.js中定义qiankun的mount钩子，渲染子应用
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount() {
render(props);
}
子应用的是用vue-cli构建的，修改vue.config.js的configureWebpack项
// 自定义webpack配置
configureWebpack: {
output: {
// 把子应用打包成 umd 库格式
### // const { name } = require('./package'); name是package.json中定义的
library: `${name}`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
},
},以上是用qiankun挂载子应用后，本地开发的配置，后面会讲一下：
1，主应用和子应用如何传参
2，如何把qiankun发布到测试和生产环境
3，发布测试和生产时踩的坑