文章序
開發(fā)中碰到的問題赴肚，需要在頁面中嵌入其他項目的頁面届氢，考慮過 iframe(兩個項目都是自己的且沒有跨域乖菱，使用這種方法不是很優(yōu)雅)助币，將項目文件遷移過來注冊成組件通過 router-view 去嵌套(可行，但是費時費力)燕雁，于是便把目光投向了微前端诞丽，綜合考量之后，選擇使用 qiankun 來試試看
貼一下官方文檔地址：https://qiankun.umijs.org/zh
主服務(wù)
服務(wù)引入文件
簡單來講就是需要引入 qiankun 提供的注冊微服務(wù)方法拐格，我這里使用的是 loadMicroApp僧免，將 name，entry捏浊，container 參數(shù)配置好即可懂衩，注意需要主微服務(wù)使用相同的請求協(xié)議，不能一個用 https 一個用 http金踪，會加載失敗
let qiankunObj = await loadMicroApp(
{
name: "microApp",
entry: "http://127.0.0.1:8081/",
container: "#microApp"
},
{
sandbox: false,
singular: true
}
);
路由
需增加路由映射微服務(wù)浊洞，比如主服務(wù)的路由是"/#/mainServiceApp"，則需要在主服務(wù)路由下增加子路由"microServiceApp/:id"胡岔，id 為子路由需要的參數(shù)法希，這樣當(dāng)路由匹配到"/#/mainServiceApp/microServiceApp:id"時會加載子路由相應(yīng)頁面，主服務(wù)可以通過更改路由匹配不同的微服務(wù)頁面
{
path: "mainServiceApp",
component: () => import("pages/mainServiceApp"),
children: [
{
path: "microServiceApp/:id",
component: () => import("pages/microServiceApp")
}
]
}
微服務(wù)
main.js
增加 bootstrap姐军、mount、unmount 三個生命周期方法尖淘，詳見官方文檔
需要判斷程序是否由微服務(wù)啟動奕锌，如果是的話要加上
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
替換webpack的全局公共路徑
