qiankun+vite+vue3从零搭建一个微前端架构系统

本文将记录一下从零搭建一个微前端架构系统，技术栈使用qiankun+vite+vue3，后面还会持续分享主应用与微应用通信，组件共享，性能优化等内容。
qiankun官网：介绍 - qiankun

参考网站：Micro Frontends

一、微前端架构介绍

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

技术栈无关。微应用可以是你喜欢的任意技术栈，Vue、React or Angular...
独立部署
独立运行。微应用之间状态隔离

二、项目搭建与准备

1. 创建主应用和子应用

使用 vite 分别创建主应用项目和子应用项目。可以通过 npm create vue@latest 命令并按照提示进行相应配置来创建基础的 vite 项目。
在主应用和子应用中安装 Element Plus（因为后续会用到，提前先配置好），在项目目录下执行 npm install element-plus，并且按需引入相关组件和样式（可通过自动导入插件等方式实现更便捷的引入）。
在主应用中安装 qiankun，执行 npm install qiankun。

2. 配置主应用

在主应用的入口文件（main.ts）中，引入并注册 Element Plus 组件（假设采用按需引入方式，需先配置好自动导入插件如 unplugin-vue-components 和 unplugin-auto-import）。
按照 qiankun 的要求配置主应用，主要包括注册子应用、设置生命周期等。

main.ts文件

ts 复制代码

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { registerMicroApps, start } from 'qiankun'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)

app.mount('#app')

registerMicroApps(
    [
        {
            name: 'silvia micro app', // app name registered
            entry: '//localhost:5174', // 微应用的出口地址
            container: '#container', // 微应用挂载的容器id
            activeRule: '/sivia-micro', // 微应用激活路由规则
        }
    ]
)

start()

AboutView.vue文件（这里直接在vite创建的AboutView.vue文件写展示子应用的代码）

ts 复制代码

<template>
    <div id="container"></div>
</template>

3. 配置子应用

子应用需要导出相应的生命周期函数供 qiankun 调用，比如 bootstrap、mount、unmount 等。main.ts文件：

ts 复制代码

import App from './App.vue';
import { createApp } from 'vue';

let router = null;
let app: any = null;
function render(props?: { container: HTMLElement; onGlobalStateChange: () => void; setGlobalState: () => void; }) {
    app = createApp(App)
    app.mount('#container')
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}
export async function mount(props: any) {
    console.log('[vue] props from main framework', props);
    render(props);
}
export async function unmount() {
    app?.$destroy();
    app.$el.innerHTML = '';
    app = null;
    router = null;
}

上面代码中window.__POWERED_BY_QIANKUN__可能会报错，需要建一个.d.ts文件。我建在了src/types/d.ts/index.d.ts这个路径了

ts 复制代码

interface Window {
    __POWERED_BY_QIANKUN__?: boolean;
    __INJECTED_PUBLIC_PATH_BY_QIANKUN__?: string;
}

index.html文件中修改挂载点：id需要改成'container'

html 复制代码

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="container"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

在vite.config.ts中添加qiankun相关配置！（非常重要，否则微应用启动不起来）：

先安装npm i vite-plugin-qiankun

ts 复制代码

import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        qiankun('silvia-micro', { useDevMode: true }),//配置微应用名字
        vueDevTools(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
})

三、项目启动

主应用和微应用都npm run dev
打开主应用url，然后点击Micro（这里我改了vite自动创建完成的按钮名称及跳转的path name），就能发现路由切换为你自己的微应用路由了，并且在主应用的右侧加载出了子应用

基础搭建先写到这里，后面会继续分享主应用与子应用通信方式，组件共享等内容，希望大家持续关注。