jeecg3.7 开启qiankun 主应用加载子应用错误

Question

版本号： "version": "3.7.0",
问题描述：拉取三个jeecgBoot-vue3，一个作为主应用，开启qiankun配置，另外两个作为子应用，页面跳转报错，已经正确进入到子应用的app中，存放子应用的容器也是存在的，但是一直处于子应用加载的状态，报错#31
是否开启的项目的配置默认自动加载了子应用，导致一对多示例功能中出现全部删除数据之后，操作按钮消失的问题 #31（因为查到的问题是说再次进入子应用没有卸载之前，但是尝试无解）
错误截图：

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

问题分析

根据您提供的问题描述，您在使用jeecgBoot 3.7.0版本作为主应用，并通过qiankun框架加载两个子应用时遇到了以下问题：

1. 页面跳转报错，子应用一直处于加载状态。
2. 在某些情况下，操作按钮消失。

解决方案

1. 解决子应用加载状态问题

问题定位：

• 子应用加载状态一直持续，可能是由于qiankun框架在加载子应用时出现了错误，导致子应用无法正确渲染。

解决思路：

• 检查qiankun的配置是否正确。
• 确保子应用的入口文件和生命周期函数正确配置。
• 检查网络请求是否正常，确保子应用的资源能够正确加载。

具体步骤：

1. 检查qiankun配置：
   确保主应用的qiankun配置正确，包括子应用的入口地址、名称等。

   // main.js
   import { registerMicroApps, start } from 'qiankun';
   
   registerMicroApps([
     {
       name: 'app1',
       entry: '//localhost:8081',
       container: '#container-app1',
       activeRule: '/app1',
     },
     {
       name: 'app2',
       entry: '//localhost:8082',
       container: '#container-app2',
       activeRule: '/app2',
     },
   ]);
   
   start();
   

2. 检查子应用的入口文件和生命周期函数：
   确保子应用的入口文件中正确导出了生命周期函数。

   // app1/src/main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   
   let instance = null;
   
   function render() {
     instance = createApp(App).mount('#app');
   }
   
   if (!window.__POWERED_BY_QIANKUN__) {
     render();
   }
   
   export async function bootstrap() {
     console.log('app1 bootstrap');
   }
   
   export async function mount() {
     console.log('app1 mount');
     render();
   }
   
   export async function unmount() {
     console.log('app1 unmount');
     instance.$destroy();
     instance = null;
   }
   

3. 检查网络请求：
   确保子应用的资源能够正确加载，可以通过浏览器开发者工具查看网络请求是否正常。

2. 解决操作按钮消失问题

问题定位：

• 操作按钮消失可能是由于子应用在卸载时没有正确处理状态或事件绑定。

解决思路：

• 确保子应用在卸载时正确清理了事件监听和状态。

具体步骤：

1. 检查子应用的卸载逻辑：
   确保子应用在卸载时正确清理了事件监听和状态。

   // app1/src/main.js
   export async function unmount() {
     console.log('app1 unmount');
     instance.$destroy();
     instance = null;
     // 清理事件监听等
   }
   

2. 检查主应用的配置：
   确保主应用在加载子应用时没有重复加载或错误配置。

总结

通过以上步骤，您可以检查和修复qiankun框架加载子应用时出现的问题。确保qiankun配置正确，子应用的入口文件和生命周期函数正确配置，以及在卸载时正确清理事件监听和状态。希望这些步骤能帮助您解决问题。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑