本文已参与【新人创作礼】活动，一起开启掘金创作之旅
去年在公司业务上参与了微前端子项目的重构和迭代，但是没有亲自搭建基座和微应用，故现在有时间，便想着根据官方文档尝试搭建一下基座和微应用。
由于平时vue接触较多，所以这一次基本采用vue作为基座和微应用
一：搭建基座
1.新建vue项目： vue init webpack main
2.安装qiankun：npm i qiankun -S
3.修改main.js 添加：registerMicroApps 注册微应用 添加代码：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'child1', // app name registered
entry: '//localhost:7100',
container: '#child1',
activeRule: '/child1',
},
{
name: 'child2',
entry:'//localhost:7101',
container: '#child2',
activeRule: '/child2',
},
]);
start();
修改App.vue 添加挂载节点
<template>
<div>
<img src="./assets/logo.png">
<div @click="goto1">跳转子应用1</div>
<div @click="goto2">跳转子应用2</div>
<!-- <router-view/> -->
<!-- 挂载节点： -->
<div style="background:#565634;width:100%;height:5px;"></div>
<div id="child1">child1容器</div>
<div id="child2">child2容器</div>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
goto1 () {
history.pushState(null, 'child1', 'child1')
},
goto2 () {
history.pushState(null, 'child2', 'child2')
},
}
}
</script>
暂时使用：**history.pushState(null, child1, child1)**完成跳转
扩展一下pushState的api state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
此时运行会
报错： TypeError: application 'child1' died in status
到这里根据官方文档，主应用的改造大致完成了。接下来是微应用的改造
二：改造微应用
1.新键vue:vue init webpack child1
2.安装 qiankun
3.添加 public-path.js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
4.改造main,js 添加三个初始化钩子 引入public-path.js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
export async function bootstrap() {
console.log('vue app bootstraped');
}
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
document.getElementById('child1'));
}
/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount(props) {
console.log('vue app unmount', props);
// );
}
5.修改子项目webpack.base.config.js
在这个文件中添加
const { name } = require('../package.json')
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
运行：
报错：报跨域
在webpack.dev.conf.js中配置
headers: {
'Access-Control-Allow-Origin': '*',
},
运行：
跳转成功但是会报错
** Uncaught Error: application 'child1' died in status SKIP_BECAUSE_BROKEN: [qiankun]: Target container with #child1 not existed while child1 mounting!**
最后查找资料显示，可能是由于节点child消失了，最后尝试修改App.vue 去除了根节点id=app
运行结果如下图：
点击标签栏-微应用1
接下来，将进入qiankun下得数据交互，接下一章
