在現代前端開發中，微前端架構逐漸成為一種流行的解決方案，尤其是在大型項目中。通過微前端，我們可以將一個復雜的單體應用拆分為多個獨立的小型應用，每個子應用可以獨立開發、部署和運行，同時共享主應用的基礎設施。本文將詳細介紹如何使用 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 文件夾，將子應用打包后的文件放入其中。

---