首先，什么是微前端
微前端（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的微前端就实现了。
参考的相关文档：