【微前端记录】微前端qiankun初体验

闲的没事学习了一下微前端架构，为以后项目复杂化后做预备，作个简单条记,记录一下根本使用方法和自己踩的一点小坑

---

• 先粘贴一段百度的微前端先容吧
  

1. 微前端是一种前端架构模式，旨在将大型前端应用程序拆分为多个独立、可独立部署的小型应用程序。这种架构模式借鉴了微服务的思想，解决了单体前端应用在扩展性、维护性和团队协作方面的诸多问题。
3. 核心理念
4. 独立性：
6. 每个子应用都是独立的，可以独立开发、测试、部署和发布。
7. 子应用之间的耦合度低，彼此独立运行。
8. 技术无关：
10. 不同的子应用可以使用不同的技术栈。例如，一个子应用可以使用 React，另一个可以使用 Vue 或 Angular。
11. 这允许团队选择最适合他们的技术，而不必受限于主应用的技术选择。
12. 团队自治：
14. 每个团队可以独立负责一个或多个子应用，这样可以提高开发效率和灵活性。
15. 团队可以根据自己的节奏进行开发和发布，而不必等待其他团队的进度。
16. 渐进迁移：
18. 可以逐步将单体应用拆分成微前端，而不需要一次性重写整个应用。
19. 这减少了重构的风险和成本。

复制代码

---

闲话少说，接纳qiankun来实现微前端架构，先贴一段qiankun的先容

1. qiankun 是一个基于 single-spa 的微前端框架，旨在更简单地实现和管理微前端架构。它提供了一套完整的解决方案，用于将多个独立的前端应用程序组合成一个整体，同时支持独立开发、独立部署和独立运行。
3. 核心特点
4. 简单易用：
6. qiankun 提供了简单的 API，使得微前端的实现变得更加容易。
7. 开发者可以快速上手，无需深入了解 single-spa 的复杂细节。
8. 技术栈无关：
10. 支持多种前端框架，如 React、Vue、Angular 等。
11. 不同的子应用可以使用不同的技术栈，互不干扰。
12. 独立部署：
14. 每个子应用可以独立部署，主应用只需加载相应的 URL。
15. 子应用的更新不会影响其他应用，发布过程更加灵活。
16. 应用隔离：
18. 通过沙箱机制实现子应用之间的隔离，避免相互影响。
19. 支持样式隔离和 JavaScript 隔离，确保各自独立运行。
20. 通信机制：
22. 提供了主应用和子应用之间的通信机制，方便数据共享和事件传递。
23. 支持全局状态管理和事件总线。
24. qiankun 的工作原理
25. qiankun 的核心工作原理是基于 single-spa 进行扩展和封装。它通过注册和启动子应用，实现子应用的加载、渲染和卸载。其主要步骤如下：
27. 注册子应用：
29. 通过 registerMicroApps 方法注册子应用，定义子应用的名称、入口、挂载容器和激活规则。
30. 启动 qiankun：
32. 调用 start 方法启动 qiankun，开始监听路由变化，根据激活规则加载和卸载子应用。
33. 子应用生命周期管理：
35. 子应用需要实现 bootstrap、mount 和 unmount 方法，用于初始化、挂载和卸载子应用。

复制代码

---

个人初体验的根本基座和微应用都是vue3+vite+ts
主应用的设置

• 安装qiankun依靠
  
• yarn add qiankun
  
• 在一个喜好的位置创建一个id为myapp的盒子用来展示微应用
  

修改入口文件

1. // 导入Vue的createApp函数，用于创建Vue应用
2. import { createApp } from "vue";
3. // 导入自定义的CSS样式文件，用于应用全局样式
4. import "./style.css";
5. // 导入App组件，作为Vue应用的根组件
6. import App from "./App.vue";
7. // 导入qiankun的registerMicroApps和start函数，用于注册和启动微前端应用
8. import { registerMicroApps, start } from "qiankun";
10. // 注册微前端应用
11. // 这里注册了一个名为"vue app"的微应用，其入口URL为http://localhost:7100
12. // 指定应用的容器为页面中的id为"myapp"的元素，并且当访问根路径("/")时，该应用将被激活
13. registerMicroApps([
14.   {
15.     name: "vue app",
16.     entry: "//localhost:7100",
17.     container: "#myapp",
18.     activeRule: "/",
19.   }
20. ]);
22. // 启动qiankun，开始微前端应用的运行
23. start();
25. // 创建并挂载Vue应用
26. // 这里使用createApp函数创建一个Vue应用，并将App组件作为根组件挂载到页面中的id为"app"的元素上
27. createApp(App).mount("#app");

复制代码

---

微应用设置

• 微应用使用vite构建，这里只说vite的设置
  
• 安装 vite-plugin-qiankun
  
• yarn add vite-plugin-qiankun
  
• 接下来设置微应用的vite.config.ts
  

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import qiankun from 'vite-plugin-qiankun'
5. // 导出Vite配置，用于设置项目的基本配置
6. export default defineConfig({
7.   // 设置静态资源的公共基础路径
8.   base: '/',
9.   // 配置Vite的开发服务器
10.   server: {
11.     // 设置服务器端口
12.     port: 7100,
13.     // 启用跨域资源共享
14.     cors: true,
15.     // 设置CORS的来源
16.     origin: 'http://localhost:7100',
17.   },
18.   // 使用的插件列表
19.   plugins: [
20.     // 使用Vue插件，这是Vite的Vue支持所必需的
21.     vue(),
22.     // 使用qiankun插件，用于微前端应用的开发
23.     qiankun('myapp', {
24.       // 开发模式下使用特殊配置，便于开发调试
25.       useDevMode: true
26.     })
27.   ],
28. })

复制代码

• 设置微应用的main.ts
  

1. import { createApp } from "vue";
2. import "./style.css";
3. import App from "./App.vue";
4. import {
5.   renderWithQiankun,
6.   qiankunWindow,
7. } from "vite-plugin-qiankun/dist/helper";
9. let app: any;
11. // 判断当前环境是否是 qiankun 微前端环境
12. if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
13.   // 如果不是微前端环境，直接挂载应用
14.   createApp(App).mount("#app");
15. } else {
16.   // 如果是微前端环境，使用 renderWithQiankun 进行应用的挂载
17.   renderWithQiankun({
18.     // 挂载应用
19.     mount(props) {
20.       app = createApp(App);
21.       // 根据 props 提供的容器选择器挂载应用
22.       app.mount(props.container?.querySelector("#app"));
23.     },
24.     // 初始化操作
25.     bootstrap() {
26.       console.log("bootstrap");
27.     },
28.     // 卸载应用
29.     unmount() {
30.       app.unmount();
31.     },
32.     // 更新应用
33.     update() {
34.       console.log("update");
35.     },
36.   });
37. }

复制代码

---

小tips
也算是初体验踩的一点小坑吧，主应用和微应用都要同时启动才气正常访问到微应用
(我本以为启动主应用会主动启动依靠的微应用呢)