【亲测免费】 vite-plugin-qiankun 常见问题解决方案

项目基础介绍

vite-plugin-qiankun 是一个用于帮助开发者快速将 Vite 项目接入 Qiankun 微前端框架的插件。它保留了 Vite 构建 ES 模块的优势，并通过一键配置的方式，使得开发者可以轻松地将现有的 Vite 项目转换为 Qiankun 的子应用。该项目主要使用 TypeScript 和 JavaScript 进行开发。

新手使用注意事项及解决方案

1. 插件安装与配置问题

问题描述：新手在安装和配置 vite-plugin-qiankun 插件时，可能会遇到插件未正确加载或配置错误的问题。

解决步骤：

1. 安装插件：

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

2. 配置插件： 在 vite.config.ts 文件中引入并配置插件：

   import qiankun from 'vite-plugin-qiankun';
   
   export default {
     plugins: [
       qiankun('myMicroAppName') // 'myMicroAppName' 是子应用名，需与主应用注册时保持一致
     ],
     base: 'http://xxx.com/' // 生产环境需要指定运行域名作为base
   };
   

3. 检查配置： 确保 vite.config.ts 文件中的配置正确无误，特别是 base 路径和插件名称。

2. 开发环境调试问题

问题描述：在开发环境中，作为子应用调试时可能会与热更新插件发生冲突，导致无法正常调试。

解决步骤：

1. 切换调试模式： 使用 useDevMode 变量来切换调试模式：

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

2. 调试配置：

   • 当 useDevMode = true 时，不使用热更新插件，但可以作为子应用加载。
   • 当 useDevMode = false 时，可以使用热更新插件，但无法作为子应用加载。

3. 检查调试环境： 确保在开发环境中正确设置了 useDevMode，并根据需要调整热更新插件的使用。

3. qiankunWindow 使用问题

问题描述：在使用 qiankunWindow 时，由于 ES 模块加载与 Qiankun 的实现方式存在冲突，可能会导致 window 上的属性设置出现问题。

解决步骤：

1. 显式操作沙盒： 在使用 qiankunWindow 时，尽量显式地操作 JS 沙盒，避免对其他子应用产生副作用：

   import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
   
   qiankunWindow.customxxx = 'ssss';
   if (qiankunWindow.__POWERED_BY_QIANKUN__) {
     console.log('我正在作为子应用运行');
   }
   

2. 检查沙盒环境： 确保在 qiankunWindow 中设置的属性不会影响到其他子应用的运行环境。

3. 参考示例： 详细的使用方式可以参考项目中的示例代码：

   git clone https://github.com/tengmaoqing/vite-plugin-qiankun.git
   npm install
   npm run example:install
   npm run example:start
   

通过以上步骤，新手可以更好地理解和使用 vite-plugin-qiankun 插件，解决常见的问题。