首先，什么是微前端
微前端（Micro-Frontends）是一種類似於微服務的架構，它將微服務的理念應用於瀏覽器端，即將 Web 應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用。各個前端應用還可以獨立運行、獨立開發、獨立部署。
簡單來講就是當我們項目越來越大，越來越復雜，新的技術和老的技術相互糾纏，開發的人員越來越多，代碼量也隨之水漲船高的時候，我們就需要用微前端，將互不關聯的需求，新老不同的技術拆分開來，相互不干擾，彼此獨立。
微前端不是一個工具，也不是一個框架，是一個架構體系。
qiankun就是一款阿里系的幫我們實現微前端的一個工具，兼容vue，react，angular。
利用qiankun我們可以非常簡便的實現一個微前端的應用。
我們可以直接簡歷兩個vue的項目，此處以vue3為例，我們需要改動的只有main.js，vue.config.js和新增一個public-path.js文件。
假設你已經建立好了兩個vue3的項目，主頁面為A，子頁面為B（微前端頁面）。
主頁面A：
安裝qiankun：npm i qiankun
App.vue
<template>
<div class="app">
<div id="childDemo"></div> <!-- 微應用的容器 --> </div> </template>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router'
import router from "./router"
import { registerMicroApps, start } from "qiankun"
let app = createApp(App);
app.use(vueRouter)
app.use(router)
app.mount('#app')
// 在主應用中注冊子應用
registerMicroApps([
{
name: "vue-app", //微應用的名稱，有多個微應用的話，必須保證唯一
entry: "//localhost:8081", // 本地運行后子應用的訪問地址
container: '#childDemo', // 微應用插入的位置
activeRule: '/vue-child' // 微應用訪問入口
props:{}//傳給微應用的數據
}]
);
// 啟動 要等主頁面加載完畢才能啟動，即nextTick之后啟動
start();
vue.config.js
module.exports ={
devServer: {
port: 8080,
headers: { // 允許跨域訪問子應用頁面
'Access-Control-Allow-Origin': '*',
}
}
}
至此主頁面的改動完成，接下來就是微應用的改動部分（微應用部分不需要安裝qiankun）
public-path.js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
main.js
function render(props) {
const { container } = props;
app.use(router).mount('#vue')
}
if (!window.__POWERED_BY_QIANKUN__) {
// 全局變量來判斷環境
render()
}
/**
* bootstrap 只會在微應用初始化的時候調用一次，下次微應用重新進入時會直接調用 mount 鈎子，不會再重復觸發 bootstrap。
* 通常我們可以在這里做一些全局變量的初始化，比如不會在 unmount 階段被銷毀的應用級別的緩存等。
*/
export async function bootstrap () {
console.log('現在進入子應用c-child的bootstraped階段')
}
/**
* 應用每次進入都會調用 mount 方法，通常我們在這里觸發應用的渲染方法
*/
export async function mount (props) {
console.log('現在進入子應用c-child的mount周期', props)
render(props)
}
/**
* 應用每次 切出/卸載 會調用的方法，通常在這里我們會卸載微應用的應用實例
*/
export async function unmount () {
console.log('現在進入子應用c-child的unmount階段')
}
/**
* 可選生命周期鈎子，僅使用 loadMicroApp 方式加載微應用時生效
*/
export async function update (props) {
console.log('update props', props)
}
router.js
const router = createRouter({
base: '/vue-child',//此處就是我們之前定義的微應用的入口路由
history: createWebHistory('/vue-child'),
routes
})
vue.config.js
const { name } = require('./package');
module.exports = {
devServer: {
port: 8081,
headers: { // 允許子應用跨域
'Access-Control-Allow-Origin': '*',
},
},
// 自定義webpack配置
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',// 把子應用打包成 umd 庫格式
jsonpFunction: `webpackJsonp_${name}`,
},
},
};
至此一個非常簡單的qiankun+vue的微前端就實現了。
參考的相關文檔：