【前端新知识】Qiankun 微前端入门指南：从零开始构建模块化应用

👉博主介绍： 博主从事应用安全和大数据领域，有8年研发经验，5年面试官经验，Java技术专家，WEB架构师，阿里云专家博主，华为云云享专家，51CTO 专家博主

⛪️ 个人社区：个人社区
💞 个人主页：个人主页
🙉 专栏地址： ✅ Java 中级
🙉八股文专题：剑指大厂，手撕 Java 八股文

文章目录

写在前面

随着现代 Web 应用的规模越来越大，单体应用逐渐显现出其局限性。微前端架构应运而生，它允许将大型应用拆分成多个小型、独立的应用，每个应用可以由不同的团队使用不同的技术栈开发，并且能够独立部署和更新。Qiankun 是一个由蚂蚁金服开源的微前端解决方案，基于 Single-SPA 框架，提供了强大的功能来帮助开发者实现这一目标。本文将带你从零开始构建一个基于 Qiankun 的微前端应用。

什么是 Qiankun？

Qiankun 是一个轻量级的微前端框架，它提供了一种简单的方式来将多个独立的小型前端应用集成到一个统一的界面中。Qiankun 支持多种技术栈共存，包括 React、Vue、Angular 等，并且支持独立部署和灵活的生命周期管理。

准备工作

在开始之前，请确保你已经安装了以下工具：

• Node.js (建议版本 14+)
• npm 或 yarn
• 一个代码编辑器（如 VSCode）

创建主应用

1. 初始化项目 首先，创建一个新的目录作为你的主应用，并初始化一个 Node.js 项目：mkdir qiankun-main-appcd qiankun-main-appnpm init -y
2. 安装依赖 安装 Qiankun 和 Vue 相关的依赖：npminstall @vue/cli-service @vue/cli-plugin-babel qiankun
3. 创建 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目：vue create main-app选择默认配置或根据需要进行自定义配置。
4. 配置 Qiankun 在 main-app 目录下，打开 src/main.js 文件，添加 Qiankun 的注册逻辑：import{ registerMicroApps, start }from'qiankun';import App from'./App.vue';const app =newVue({render:h=>h(App),}).$mount('#app');// 注册子应用registerMicroApps([{ name:'vue-sub-app',// 子应用名称 entry:'//localhost:8081',// 子应用入口地址 container:'#subapp-container',// 子应用挂载的 DOM 节点 activeRule:'/vue-sub-app',// 路径匹配规则},]);// 启动 Qiankunstart();
5. 创建容器组件 在 main-app/src 目录下，创建一个名为 SubAppContainer.vue 的文件，内容如下：<template> <div id="subapp-container"></div></template><script>export default { name: 'SubAppContainer',};</script>
6. 路由配置 如果你使用 Vue Router，可以在 main-app/src/router/index.js 中添加一个路由指向 SubAppContainer 组件：import Vue from'vue';import Router from'vue-router';import SubAppContainer from'../components/SubAppContainer.vue';Vue.use(Router);exportdefaultnewRouter({ routes:[{ path:'/vue-sub-app', component: SubAppContainer,},// 其他路由],});

创建子应用

1. 初始化子应用项目 创建一个新的目录作为你的子应用，并初始化一个 Node.js 项目：mkdir vue-sub-appcd vue-sub-appnpm init -y
2. 创建 Vue 项目 使用 Vue CLI 创建一个新的 Vue 项目：vue create sub-app选择默认配置或根据需要进行自定义配置。
3. 配置子应用 在 sub-app 目录下，打开 public/index.html 文件，移除 <script> 标签中的 type="module" 属性（如果存在）。
4. 修改入口文件 打开 src/main.js 文件，将其内容改为：import Vue from'vue';import App from'./App.vue';let instance =null;functionrender(props ={}){const{ container }= props; instance =newVue({render:(h)=>h(App),}).$mount(container ? container.querySelector('#app'):'#app');}if(!window.__POWERED_BY_QIANKUN__){render();}exportasyncfunctionbootstrap(){ console.log('vue app bootstraped');}exportasyncfunctionmount(props){ console.log('vue app mount', props);render(props);}exportasyncfunctionunmount(){ console.log('vue app unmount'); instance.$destroy(); instance.$el.innerHTML =''; instance =null;}
5. 配置 Webpack 在 vue.config.js 中添加以下配置，以确保子应用能够正确运行：module.exports ={ publicPath: process.env.NODE_ENV==='production'?'/vue-sub-app/':'/', devServer:{ port:8081,}, configureWebpack:{ output:{ library:'vue-sub-app-[name]', libraryTarget:'umd', jsonpFunction:`webpackJsonp_vue_sub_app`,},},};

运行项目

1. 启动主应用 在 qiankun-main-app 目录下，启动主应用：cd main-appnpm run serve
2. 启动子应用 在 vue-sub-app 目录下，启动子应用：cd sub-appnpm run serve
3. 访问主应用 打开浏览器，访问 http://localhost:8080/vue-sub-app，你应该能看到子应用成功加载并显示在主应用中。

精彩专栏推荐订阅：在下方专栏👇🏻
✅ 2023年华为OD机试真题（A卷&B卷）+ 面试指导
✅ 精选100套 Java 项目案例
✅ 面试需要避开的坑（活动）
✅ 你找不到的核心代码
✅ 带你手撕 Spring
✅ Java 初阶