使用 Vue3 + Webpack 和 Vue3 + Vite 实现微前端架构（基于 Qiankun）

在现代前端开发中，微前端架构逐渐成为一种流行的解决方案，尤其是在大型项目中。通过微前端，我们可以将一个复杂的单体应用拆分为多个独立的小型应用，每个子应用可以独立开发、部署和运行，同时共享主应用的基础设施。本文将详细介绍如何使用 Vue3 + Webpack 作为主项目，Vue3 + Vite 作为子项目，并通过 Qiankun 实现微前端架构。

---

主项目配置（Vue3 + Webpack）

主项目是整个微前端架构的核心，它负责加载和管理子应用。以下是主项目的配置步骤：

1. 安装依赖

首先，确保安装了 qiankun，这是微前端的核心库：

npm install qiankun --save

2. 配置主应用注册子应用

在主项目的 main.js 文件中，引入并配置 registerMicroApps 和 start 方法：

import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'application', // 子应用名称entry: 'http://部署地址.com/sub-app', // 子应用入口地址container: '#sub-app-container', // 子应用挂载的 DOM 容器activeRule: '#/sub-app', // 激活规则，这里直接使用哈希路径props: {/* 可以传递给子应用的参数 */},},
]);// 启动微前端
start();

3. 路由配置

为了让主应用能够正确加载子应用，需要在主应用的路由配置中添加一条通配符规则：

{path: '/sub-app/:page*', // 使用通配符 * 匹配所有子路由name: 'sub-app',component: () => import('@/views/subapp.vue'), // 子应用容器组件meta: { name: '子应用' },
}

这里的 subapp.vue 是一个简单的容器组件，用于挂载子应用的内容：

<template><div id="sub-app-container"></div>
</template>

---

子项目配置（Vue3 + Vite）

子项目是一个独立的 Vue3 应用，使用 Vite 构建工具进行开发和打包。以下是子项目的配置步骤：

1. 安装依赖

确保安装了以下依赖：

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

2. 配置 vite.config.js

在子项目的 vite.config.js 文件中，配置 vite-plugin-qiankun 插件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import qiankun from "vite-plugin-qiankun";export default defineConfig({plugins: [vue(),qiankun("application", {useDevMode: true, // 开发模式下启用}),],resolve: {alias: {"@": "/src",},},server: {port: 7001, // 开发服务器端口headers: {"Access-Control-Allow-Origin": "*", // 允许跨域},},build: {assetsDir: 'static', // 静态资源目录rollupOptions: {output: {chunkFileNames: 'static/js/[name]-[hash].js',entryFileNames: 'static/js/[name]-[hash].js',assetFileNames: 'static/[ext]/[name]-[hash].[ext]',},},},base: '/sub-app/', // 部署时的基础路径
});

3. 路由配置

子应用的路由需要根据是否运行在微前端环境中动态调整基础路径：

import { createRouter, createWebHashHistory } from 'vue-router';
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';const routes = [{path: '/sub-app/abort',name: 'abort',component: () => import('@/views/abort.vue'),},{path: '/sub-app/home',name: 'home',component: () => import('@/views/home.vue'),},
];const base = qiankunWindow.__POWERED_BY_QIANKUN__ ? '/sub-app' : '/';
const router = createRouter({history: createWebHashHistory(base),routes,
});export default router;

4. 主入口文件 main.ts

在子项目的 main.ts 中，处理微前端环境下的挂载逻辑：

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
import { renderWithQiankun, qiankunWindow } from "vite-plugin-qiankun/dist/helper";
import ElementPlus from "element-plus";
import locale from "element-plus/es/locale/lang/zh-cn";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";let app;function render(props = {}) {const { container } = props;app = createApp(App);app.use(router);app.use(ElementPlus, { locale });for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component);}app.mount(container ? container.querySelector("#app") : "#app");
}const initQianKun = () => {renderWithQiankun({mount(props) {console.log("vite 应用挂载", props);render(props);},bootstrap() {console.log("vite-vue3 初始化");},unmount() {console.log("vite-vue3 卸载");app.unmount();},});
};qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render({});

---

Nginx 配置

为了将子应用的静态资源部署到主应用的服务器上，我们需要在主项目的 Nginx 配置中添加子应用的路径规则：

location /sub-app/ {root /path/to/main-project; # 主项目的根目录index /sub-app/index.html;
}

在主项目的根目录下创建一个 sub-app 文件夹，将子应用打包后的文件放入其中。

---