【亲测免费】 vite-plugin-qiankun 安装和配置指南

1. 项目基础介绍和主要编程语言

项目基础介绍

vite-plugin-qiankun 是一个用于帮助开发者快速将 Vite 项目接入 Qiankun 微前端框架的插件。它保留了 Vite 的 ES 模块特性，使得开发者可以在不改变原有 Vite 配置的情况下，轻松地将项目接入 Qiankun 微前端架构。

主要编程语言

该项目主要使用 TypeScript 和 JavaScript 进行开发。

2. 项目使用的关键技术和框架

关键技术和框架

• Vite: 一个快速的构建工具，特别适用于现代前端项目。
• Qiankun: 一个基于 Single-SPA 的微前端框架，支持多个前端应用的集成。
• TypeScript: 用于增强 JavaScript 的类型检查和开发体验。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装和配置之前，请确保你已经安装了以下工具：

• Node.js (建议版本 14.x 或更高)
• npm 或 yarn

详细安装步骤

步骤 1: 创建一个新的 Vite 项目

如果你还没有一个 Vite 项目，可以通过以下命令创建一个新的 Vite 项目：

npm create vite@latest my-vite-app --template vue
cd my-vite-app

步骤 2: 安装 vite-plugin-qiankun

在项目根目录下运行以下命令来安装 vite-plugin-qiankun：

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

步骤 3: 配置 vite.config.ts

在 vite.config.ts 文件中引入并配置 vite-plugin-qiankun：

import { defineConfig } from 'vite';
import qiankun from 'vite-plugin-qiankun';

export default defineConfig({
  plugins: [
    qiankun('myMicroAppName', { useDevMode: true })
  ],
  base: 'http://xxx.com/' // 生产环境需要指定运行域名作为base
});

步骤 4: 配置入口文件

在项目的入口文件（例如 main.ts 或 main.js）中，添加 Qiankun 的生命周期配置：

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    const mountRoot = container?.querySelector('#root');
    ReactDOM.unmountComponentAtNode(mountRoot || document.querySelector('#root'));
  }
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render([]);
}

步骤 5: 开发环境调试

在开发环境中，可以通过设置 useDevMode 来控制是否启用热更新插件。如果 useDevMode 为 true，则不使用热更新插件，但可以作为子应用加载。

const useDevMode = true;
const baseConfig = {
  plugins: [
    useDevMode ? [] : [reactRefresh()],
    qiankun('viteapp', { useDevMode })
  ]
};

注意事项

• qiankunWindow 因为 ES 模块加载与 Qiankun 的实现方式有些冲突，所以使用本插件实现的 Qiankun 微应用里面没有运行在 JS 沙盒中。在不可避免需要设置 window 上的属性时，尽量显示地操作 JS 沙盒，否则可能会对其它子应用产生副作用。

通过以上步骤，你就可以成功地将你的 Vite 项目接入 Qiankun 微前端框架了。