- 在子应用 src 下的 main.js 中
引入上面新增的`public-path.js`,然后新建一个`render`函数,并创建 VueRouter,然后挂载到应用上。
导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
完整代码如下:
```javascript
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
Vue.config.productionTip = false;
//-------------------------挂载应用------------------------------
import "./public-path";
import routes from "./router";
import VueRouter from "vue-router";
let Router = null;
let instance = null;
function render(props = {}) {
const { container, routerBase } = props;
//在 render 中创建 VueRouter，可以保证在卸载微应用时，移除 location 事件监听，防止事件污染
Router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? routerBase : "/",
mode: "history",
routes: routes,
});
// 挂载应用
instance = new Vue({
router: Router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector("#app") : "#app"); //为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围
}
//---------------------------独立运行时-------------------------
//
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("VueMicroApp mount", props);
render(props);
}
/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount(props) {
console.log("VueMicroApp unmount");
instance.$destroy();
instance.$el.innerHTML = "";
instance = null;
Router = null;
}
/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log("update props", props);
}
```
qiankun 是基于 single-spa 实现的，所以你可以在[Registered application lifecycle](https://single-spa.js.org/docs/building-applications/#registered-application-lifecycle)找到更多关于微应用生命周期相关的文档说明。
- 子应用的`vue.config.js`中必须添加如下配置
```js
const appName = require("./package.json").name;
module.exports = {
devServer: {
headers: {
"Access-Control-Allow-Origin": "*", // 主应用获取子应用时跨域响应头
},
},
configureWebpack: {
//为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置
output: {
library: `${appName}-[name]`, // 微应用的包名，必须与主应用中注册的微应用名称一样!
libraryTarget: "umd", // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${appName}`, //按需加载
},
},
};
```
### 基座应用需要做的事
- 在基座应用中安装 qiankun,`yarn add qiankun`/`xxx install qiankun`
- 在基座应用的 src 中新建一个 subApp.js 的文件,用于存放子应用的配置
具体如下
```js
const subApps = [
{
name: "sub-a",
entry: "//localhost:9425/",
activeRule: "/sub-a",
container: "#subapp-container", // 子应用挂载的 div
props: {
routerBase: "/sub-a", // 下发路由给子应用，子应用根据该值去定义 qiankun 环境下的路由
},
},
{
name: "sub-b",
entry: "//localhost:9426/",
activeRule: "/sub-b",
container: "#subapp-container",
props: {
routerBase: "/sub-b",
},
},
];
export default subApps;
```
在 基座应用的 App.vue 中设置好子应用挂载的节点
```html