微前端是什么？

微前端就是頁面的某個功能可以獨立為一個項目進行開發、部署。比如：自己的項目使用iframs引入百度

qiankun

qiankun是一個基于single-spa的微前端實現庫，qiankun 對于用戶而言只是一個類似 jQuery 的庫，你需要調用幾個 qiankun 的 API 即可完成應用的微前端改造

主應用

安裝qiankun

npm i qiankun -S	

主應用配置

在webpack入口js文件中引入qiankun方法注入。

//qiankun配置
import { registerMicroApps, start } from 'qiankun';//子應用列表
let apps = [{name:'subapp',entry:'//localhost:8080',//子應用的地址，這里演示是本地啟動的地址。container:'#app',//子應用的容器節點的選擇器（vue一般為app）activeRule:'/subapp',//訪問子應用的規則，比如：主應用為localhost:8081，那訪問該子應用的url應為localhost:8081/subapp}
]//注冊子應用
registerMicroApps(apps);//啟動
start();

子應用配置

src中創建public-path.js文件

//public-path.jsif (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

main.js 中加入子應用生命周期函數，統一調用

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falselet instance = null;
function render(props = {}) {const { container } = props;instance = new Vue({render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 獨立運行時
if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}
export async function mount(props) {console.log('[vue] props from main framework', props);render(props);
}
export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;
}

解決跨域問題

子應用和主應用為兩個服務，分別在兩個端口，要想通過主應用訪問子應用的資源必定會存在跨域問題
vue.config.js

const { name } = require('./package');
module.exports = {devServer: {headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微應用打包成 umd 庫格式jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替換成 chunkLoadingGlobal},},
};