本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
大家好，我是小麦，今天我们来聊聊微前端，不知道大家有没有遇到过这样的项目，一直在更新迭代，代码越来越多，越来越不好管控，当听到要改这个项目的某个小功能的时候，头皮就开始有点麻hhhhhhh，微前端可帮你解决大部分痛点，学起来！！！
什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，它具备与技术栈无关、独立开发和部署、增量升级、独立运行时等核心价值，即将 Web 应用由单一的单体应用转变为多个能够独立开发、测试、部署的小型前端应用，而在用户看来仍然是内聚的单个产品。
先举两个例子：
例子1：
假如我们想要复用其他项目部分功能的内容部分的时候怎么办？
如果把他的代码直接复制过来，就可能会遇到UI框架不同，vue版本不同甚至技术栈不同...
这种情况就需要用到微前端，因为我们需要做到的是让他们的代码运行在他们自己的环境之上，而我们对他们的页面仅仅是引用。
例子2：
当我们一直迭代一个系统的时候，项目会随着功能增加越来越庞大就会出现很多问题
- 打包速度慢，部署升级麻烦
- 部分公用组件或者插件修改或者提升版本很容易影响到整个项目
- 项目大，参与过的人员越多，代码风格，代码规范以及代码冲突等问题也会很多
这种情况也需要用微前端用多个独立的小应用聚合成一个完整功能的应用
开始搭建一个微前端的主应用
本文的主应用使用的技术栈是vue3 + vite + qiankun + typescript
qiankun是一个基于的[微前端]实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统
一、安装qiankun（本文使用yarn包管理工具）
yarn add qiankun
二、子应用配置管理文件micro-app.ts
// /src/micro-app.ts文件
const microApps = [
{
name: "micro1",
entry: "http://localhost:6888/",
activeRule:'micro1'
},
{
name: "micro2",
entry: "http://localhost:8100/",
activeRule:'micro2'
},
];
const apps = microApps.map((app) => {
return {
...app,
container: "#container",
props: {
routerBase: app.activeRule,
},
loader(loading: boolean) {
console.log("加载中...", loading);
},
};
});
export default apps;
三、启动qiankun
// App.vue文件添加如下代码
import { registerMicroApps, start } from "qiankun";
import apps from "./micro-app";
registerMicroApps(apps);
start({
sandbox: {
experimentalStyleIsolation: true,
},
});
微前端的子应用
子应用我这里演示也是用的vue3
一、vite.config.ts
// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, __dirname)
return {
plugins: [vue(), qiankun('micro1', { useDevMode: true })],
server: {
port: xxx,
open: true
},
}
})
二、入口文件main.ts配置
// 需要先安装插件 yarn add @sh-winter/vite-plugin-qiankun
import { createApp } from 'vue'
import App from './App.vue'
import routes from './router'
import { createRouter, createWebHashHistory } from 'vue-router'
import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
const render = (container?: any) => {
const app = createApp(App)
app.mount('#micro1')
}
exportLifeCycleHooks({
bootstrap() {
// do nothing.
},
mount(props) {
render(props.container);
},
unmount() {
app?.unmount();
}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
render();
}
做到这里就大功告成啦！！！
可以在主应用路由后面加上/micro1就能看到子应用的内容了
补充
// 主应用与子应用之间跳转以及传递参数的方法
window.history.pushState({
user: {} // 参数
}, '', '/')
// 跳转到子应用的话把'/'改为'/micro1'
