使用 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 文件夹，将子应用打包后的文件放入其中。

---