微前端基本概念
微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。
微前端的核心特点
- 模块化：将大型前端应用拆分为多个小型模块，每个模块都是一个独立的微应用。
- 独立开发：每个微应用可以由不同的团队独立开发，使用不同的技术栈。
- 独立运行：微应用可以独立运行，通过前端路由和页面嵌入等技术实现模块之间的相互调用和通信。
- 独立部署：微应用可以独立部署，无需整个应用重启即可更新单个微应用。
- 技术栈无关性：允许使用不同的编程语言和框架进行开发，提高开发团队的灵活性。
微前端的实现方法
- 基于路由的拆分：主应用根据路由的变化来加载和卸载不同的微应用。
- 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
以上一个简单的微前端应用就启动成功了！
