微前端基本概念
微前端借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活。
微前端的核心特点
- 模块化:将大型前端应用拆分为多个小型模块,每个模块都是一个独立的微应用。
- 独立开发:每个微应用可以由不同的团队独立开发,使用不同的技术栈。
- 独立运行:微应用可以独立运行,通过前端路由和页面嵌入等技术实现模块之间的相互调用和通信。
- 独立部署:微应用可以独立部署,无需整个应用重启即可更新单个微应用。
- 技术栈无关性:允许使用不同的编程语言和框架进行开发,提高开发团队的灵活性。
微前端的实现方法
- 基于路由的拆分:主应用根据路由的变化来加载和卸载不同的微应用。
- Web Components:利用Web Components技术封装微应用,实现组件级别的隔离和复用。
- iframe:通过iframe嵌入微应用,实现简单的隔离和加载。但iframe的隔离性较强,可能导致样式和脚本的冲突。
- 库和框架支持:如single-spa、qiankun等库提供了微前端的实现框架和工具,帮助开发者更方便地构建微前端应用。
QianKun
Qiankun是由蚂蚁金服开源的一款基于single-spa的微前端实现库。它旨在通过微前端的方式,将大型前端应用拆分成多个小型、独立、可独立开发、测试和部署的子应用。每个子应用都拥有自己独立的生命周期和上下文环境,通过Qiankun的框架进行集成和管理,形成一个完整的用户界面。
项目实战
创建一个Vue2项目 不同于single-spa来实现微前端,我们用qiankun来搭建整个架构的时候,主应用(基座)是一个完整的项目。你可以选中用vue来搭建一个基座项目,也可以使用react或者umi等等。
再基座项目中,我们所有主页面、路由、权限都可以实现。子应用只负责对应自己的业务板块。
接下来我创建一个vue2的项目来作为我们基座应用。使用vue2来搭建相对比较简单,容易上手。
搭建项目基座
Vue2项目作为我们整个微前端项目的基座
(1)主应用下载插件
yarn add qiankun # 或者 npm i qiankun -S
(2)主应用中配置
base/src/qiankun/index.js
/**
* 用于存放我们各个微应用的数组。
* 以后有多少个微应用,这个数组中就会存放多少个对象
*/
const apps = [
];
import { message } from "element-ui";
import {
registerMicroApps,
addGlobalUncaughtErrorHandler,
start,
} from "qiankun";
/**
* 注册微应用
* 第一个参数 - 微应用的注册信息
* 第二个参数 - 全局生命周期钩子
*/
registerMicroApps(apps, {
// qiankun 生命周期钩子 - 微应用加载前
beforeLoad: (app) => {
console.log("before load", app.name);
return Promise.resolve();
},
// qiankun 生命周期钩子 - 微应用挂载后
afterMount: (app) => {
console.log("after mount", app.name);
return Promise.resolve();
},
});
/**
* 添加全局的未捕获异常处理器
*/
addGlobalUncaughtErrorHandler((event) => {
console.error(event);
const { message: msg } = event;
// 加载失败时提示
if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
message.error("微应用加载失败,请检查应用是否可运行");
}
});
// 导出 qiankun 的启动函数
export default start;
(3)加载qiankun的配置
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import startQiankun from "./qiankun/index";
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
startQiankun()
(4)配置微应用容器
<el-main>
<!-- 主应用的渲染区域,用于挂载主应用触发的组件 -->
<router-view v-show="$route.name"></router-view>
<!-- 子应用渲染的区域,用于挂载Vue子应用节点 -->
<div v-show="!$route.name" id="container"></div>
</el-main>
搭建Vue微应用
在创建好了 Vue
微应用后,我们可以开始我们的接入工作了。首先我们需要在主应用中注册该微应用的信息
base/src/qiankun/index.js
const apps = [
/**
* name: 微应用名称 - 具有唯一性
* entry: 微应用入口 - 通过该地址加载微应用,保证微应用地址和端口正确
* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
*/
{
name: "VueApp",
entry: "//localhost:8080",
container: "#container",
activeRule: "/vue",
},
];
配置微应用启动方案及遇到的问题
// src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line camelcase, no-undef
//注释指令可以用来临时禁用某些规则的检查,通常用于特定的情况下,例如你需要使用某个特殊命名规则或访问//全局变量时
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
const { defineConfig } = require('@vue/cli-service')
`@vue/cli-service` 是 Vue CLI 提供的一个包,它包含了一些用于项目开发和构建的工具和配置。其中,`defineConfig` 是包中提供的一个函数。
通过引入 `defineConfig`,你可以定义你的项目的配置对象,并将其导出供 Vue CLI 使用。这个配置对象包含了一系列选项,用于配置项目的开发、构建和部署等方面。
启动应用
分别在 vue主应用 和 Vue微应用 应用的根目录下执行以下命令启动应用:
npm start
以上一个简单的微前端应用就启动成功了!