微頁面配置文檔
官方文檔：https://qiankun.umijs.org/
參考Demo：https://github.com/wl-ui/wl-mfe
注：所有文件的相關(guān)代碼在文檔末尾附件提供，將文件類型有txt改為js就可使用
一、[endif]主應(yīng)用配置
1、安裝qiankun2.0
$ yarn add qiankun # 或者 npm i qiankun -S
2、配置主應(yīng)用main.js,在主應(yīng)用入口文件main.js寫入以下四行代碼
a、register.js：利用qiankun2.0框架注冊（registerMicroApps）并啟動（start）子應(yīng)用，并開啟一些監(jiān)控及全局錯(cuò)誤異常處理。如下圖：
b、initGlStore.js：利用qiankun2.0框架提供通信（initGlState）來定義和初始化全局狀態(tài)字段，然后實(shí)現(xiàn)主應(yīng)用、子應(yīng)用的通信及通信監(jiān)聽。如下圖：
props根據(jù)系統(tǒng)業(yè)務(wù)需要定義需要傳入子頁面的公共數(shù)據(jù)，可以包含公共組件、公共方法、主應(yīng)用路由、http請求等。
3、[endif]如何在主應(yīng)用的某個(gè)路由頁面加載微應(yīng)用
官方文檔地址：https://qiankun.umijs.org/zh/faq#如何在主應(yīng)用的某個(gè)路由頁面加載微應(yīng)用
a、必須保證微應(yīng)用加載時(shí)主應(yīng)用這個(gè)路由頁面也加載了。
主應(yīng)用注冊這個(gè)路由時(shí)給path 加一個(gè) *，注意：如果這個(gè)路由有其他子路由，需要另外注冊一個(gè)路由，仍然使用這個(gè)組件即可。
const routes = [
{
? ? path: '/portal/*',
? ? name: 'portal',
? ? component: () => import('../views/Portal.vue'),
? },
];
b、微應(yīng)用的activeRule 需要包含主應(yīng)用的這個(gè)路由 path。
registerMicroApps([
? {
? ? name: 'app1',
? ? entry: 'http://localhost:8080',
? ? container: '#container',
? ? activeRule: '/portal/app1',
? },
]);
c、注意事項(xiàng)：在Portal.vue 這個(gè)組件的 mounted 周期調(diào)用 start 函數(shù)，注意不要重復(fù)調(diào)用。
import { start } from 'qiankun';
export default {
mounted() {
? ? if (!window.qiankunStarted) {
? ? ? window.qiankunStarted = true;
? ? ? start();
? ? }
? },
};
二、子應(yīng)用配置（不需要安裝qiankun2.0）
1、在 src 目錄新增 public-path.js。如下圖：
2、配置子應(yīng)用入口文件main.js （注：為了避免根id #app 與其他的 DOM 沖突，按需修改）。如下圖：
3、打包配置修改（vue.config.js）。如下圖：
4、子應(yīng)用接受主應(yīng)用的傳值
a、在子應(yīng)用的main.js中調(diào)用app-store.js的appStore方法。
b、appStore的具體處理。接受保存供子應(yīng)用使用
5、微應(yīng)用打包之后css 中的字體文件和圖片加載 404
官方地址：https://qiankun.umijs.org/zh/faq#微應(yīng)用打包之后css中的字體文件和圖片加載 404
選擇的是官方第三種方案。如下圖：
三、其他一些問題
1、如何同時(shí)激活兩個(gè)微應(yīng)用？
官網(wǎng)地址：https://qiankun.umijs.org/zh/faq#如何同時(shí)激活兩個(gè)微應(yīng)用
2、[endif]如何確保主應(yīng)用跟微應(yīng)用之間的樣式隔離
官網(wǎng)地址：https://qiankun.umijs.org/zh/faq#如何確保主應(yīng)用跟微應(yīng)用之間的樣式隔離
附件：百度網(wǎng)盤鏈接
鏈接：https://pan.baidu.com/s/1xU8zBa4cqXWWkmBYhPWC_A
提取碼：oef6
1、主應(yīng)用register.js
2、主應(yīng)用initGlStore.js
3、子應(yīng)用main.js
4、子應(yīng)用app-store.js
5、子應(yīng)用public-path.js
6、子應(yīng)用vue.config.js
