Vite+微前端Qinkun的基本部署

一、前言

Qiankun是一个基于Single-SPA的微前端框架，由阿里巴巴团队开发并开源。它旨在帮助开发者将大型前端应用拆分为多个独立的子应用，从而实现更高效的开发、维护和部署。Qiankun 提供了一套完整的解决方案，支持多个独立的前端应用在同一个页面中运行，同时保持各自的独立性和隔离性。

二、核心特征

• 应用隔离：Qiankun 通过沙箱机制实现了 JavaScript、CSS 和 DOM 的隔离，确保子应用之间的运行环境互不干扰。
• 独立开发与部署：每个子应用可以独立开发、测试和部署，提高了团队的开发效率。
• 技术栈无关：Qiankun 支持不同技术栈的子应用（如 React、Vue、Angular 等），可以在同一个页面中混合使用。
• 路由同步：Qiankun 提供了路由同步机制，确保主应用和子应用之间的路由状态保持一致。
• 资源预加载：支持子应用的资源预加载，提升用户体验。
• 通信机制：提供了简单易用的通信机制，支持主应用和子应用之间的数据传递和事件通信。

三、核心概念

• 主应用（Master Application）：负责整个应用的框架和路由管理，加载和卸载子应用。
• 子应用（Micro Application）：独立的子应用，可以是 React、Vue、Angular 等技术栈开发的应用。
• 沙箱（Sandbox）：Qiankun 通过沙箱机制隔离子应用的运行环境，防止全局变量污染和样式冲突。
• 生命周期：Qiankun 为子应用提供了生命周期钩子（如 bootstrap、mount、unmount），方便子应用在加载和卸载时执行相应的逻辑。

四、工作原理

• 应用注册：主应用通过 registerMicroApps 方法注册子应用，并指定子应用的入口文件、路由规则等。
• 应用加载：当路由匹配时，Qiankun 会动态加载子应用的资源（如 JS、CSS 文件），并初始化子应用。
• 沙箱隔离：Qiankun 为每个子应用创建一个独立的沙箱环境，确保子应用的 JavaScript 和 CSS 不会影响其他应用。
• 生命周期管理：Qiankun 调用子应用的生命周期钩子，控制子应用的挂载和卸载。

五、使用场景

• 大型前端项目：当项目规模较大时，可以将不同模块拆分为独立的子应用，由不同团队独立开发和维护。
• 多技术栈共存：在同一个项目中，可以使用不同的技术栈开发不同的模块，并通过 Qiankun 集成到一起。
• 渐进式升级：在旧系统中逐步引入新技术栈时，可以通过 Qiankun 将新功能作为子应用嵌入到旧系统中。

六、使用 Qiankun 搭建微前端应用的基本步骤

1. 创建主应用（基座应用）

主应用负责加载和管理子应用。

1.1 初始化主应用

使用 Vue、React 或其他框架创建一个新的项目，或者使用现有项目作为主应用。其他教程基本都是React项目作为主应用，但是我们这个教程使用Vue3+Vite项目作为主应用。

# 使用 Vite 创建一个新的 Vue 项目
npm create vite@latest main-app --template vue

1.2 安装 Qiankun

在主应用中安装 Qiankun。

npm install qiankun --save

1.3 配置主应用

在主应用（main.js 或 app.js）中注册子应用。

修改 src/main.js 或 src/main.ts

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import {registerMicroApps, start} from "qiankun";
import {createRouter, createWebHashHistory} from "vue-router";

const app = createApp(App)

//因为例子需要路由跳转演示，所以这里先创建了一个空的路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: []
})

app.use(router)

//注册子应用
registerMicroApps([
    {
        name: 'vue-app',//子应用名称
        entry: 'http://localhost:7001',//子应用入口
        container: '#subapp-viewport',//子应用挂载容器
        activeRule: '#/vue'//子应用激活的路由规则
    },
    {
        name:'vue-app-excel',
        entry: 'http://localhost:7002',
        container: '#subapp-viewport',
        activeRule: '#/excel'
    }
], {
    beforeLoad: [
        (app): any => {
            console.log('before load', app.name)
        },
    ],
    beforeMount: [
        (app): any => {
            debugger
            console.log('开始挂载：', app.name)
        },
    ],
    afterMount: [
        (app): any => {
            console.log(app.name, '挂载成功了')
        },
    ],
    afterUnmount: [
        (app): any => {
            console.log('贾维斯卸载 ', app.name)
        },
    ]
})

//启动qiankun
start()

app.mount('#app')

1.4 在主应用中添加子应用容器

在主应用的 HTML 文件（App.vue）中添加一个容器，用于挂载子应用。

//app.vue

<template>
  <div>
    <h1>主应用（Vue 3 + Vite）</h1>
    <a @click.prevent="loadSubApp('/vue')">加载 Vue子应用1</a>
    |
    <a @click.prevent="loadSubApp('/excel')">加载 Vue子应用2</a>

    <!--子应用挂载的容器-->
    <div id="subapp-viewport"></div>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";

const router = useRouter()
const loadSubApp = (appName: string) => {
  router.push(appName)
}
</script>

<style scoped>

</style>

1.5 配置 Vite 支持 Qiankun

Vite 默认不支持 Qiankun 的 UMD 格式加载，因此需要修改 Vite 配置。

在vite.config.js中添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7000, // 主应用的端口
    cors: true, // 允许跨域
  },
  base: './', // 确保静态资源路径正确
})

2. 创建子应用

子应用可以是独立的 Vue、React 或其他框架的项目。本教程都是Vue项目

2.1 初始化子应用

使用 Vite 创建一个新的 Vue 3 子应用。

# 使用 Vite 创建一个新的 Vue 项目
npm create vite@latest sub-vue-app --template vue

2.2 配置 Vue 子应用

在子应用中添加 Qiankun 的生命周期钩子。

修改 src/main.js 或 src/main.ts

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import {qiankunWindow, renderWithQiankun} from "vite-plugin-qiankun/es/helper";

let instance: any = null

/**
 * 渲染子应用
 * @param props
 */
function render(props: any = {}) {
    const {container} = props
    instance = createApp(App)
    //如果子应用需要渲染到指定容器的#app元素上，否则渲染到#app元素上
    instance.mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时，没有子应用
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    render();
} else {
    renderWithQiankun({
        mount: (props: any) => {
            render(props)
        },
        bootstrap: () => {
            console.log('[vue] vue app bootstraped');
        },
        unmount: () => {
            console.log('[vue] vue app unmount');
            instance.unmount();
            instance = null;
        },
        update: (props: any) => {
            console.log('[vue] vue app update', props);
        }
    })
}

2.3 修改 vite.config.js

安装 vite-plugin-qiankun ，vite-plugin-qiankun是一个用于 Vite 的插件，它可以帮助你在基于 Vite 的项目中集成 Qiankun，实现微前端架构

npm install vite-plugin-qiankun --save-dev

在子应用的 vite.config.js 中添加以下配置：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
    // 这里是子应用的配置,使用vite就需要安装vite-plugin-qiankun插件
    plugins: [vue(), qiankun('sub-vue-app', {useDevMode: true})],
    server: {
        port: 7001, // 子应用的端口
        cors: true, // 允许跨域
    },
    base: './', // 确保静态资源路径正确
    build: {
        lib: {
            entry: './src/main.ts', // 入口文件
            name: 'sub-vue-app', // 子应用名称
            fileName: 'sub-vue-app', // 打包后的文件名
            formats: ['umd'], // 打包为 UMD 格式
        },
    },
})

3. 访问应用

打开浏览器，访问主应用的地址，并通过 #/vue或 #/excel路径访问子应用。因为主应用用的hash路由，所以可以直接#/youRouter这种路由直接访问子应用，如果使用history路由请自行百度。

4. 部署

将主应用和子应用分别部署到服务器上，并确保子应用的入口地址正确配置。

5. 其他注意事项

• 跨域问题：确保子应用的资源允许跨域访问。
• 路由配置：子应用的路由需要与主应用的路由协调，避免冲突。
• 样式隔离：Qiankun 提供了样式隔离的功能，但你可能需要手动处理一些样式冲突问题。

通过以上步骤，你可以成功搭建一个基于 Qiankun 的微前端应用。

初始化页面

切换到子应用1

切换到子应用2