说实话，Vben Admin管理系统集成微前端wujie，这个话题挺有意思的，咱就是说微前端架构现在越来越流行了你懂的。

下面分步实施集成功Neng：

前端Vben Admin企业级管理系统框架.Vben Admin是一个基于Vue 3、Vite、TypeScript和Ant Design Vue的企业级中后台管理系统框架.

interface HTMLIframeElementWithContentWindow extends HTMLIFrameElement { contentWindow: Window;}// refreshApp 主应用Ke以通过下述方法，主动清除指定子应用的沙箱缓存const refreshApp = => { if { console.error; return; } // 这里的window应该是顶级窗口，也就是主应用的window const SUB_FRAME = window.document.querySelector as HTMLIframeElementWithContentWindow; if { console.warn; return; } const SUB_WINDOW = SUB_FRAME.contentWindow; const SUB_IDMAP = SUB_WINDOW.__WUJIE?.inject?.idToSandboxMap; // 沙箱Map对象 SUB_IDMAP.clear;};// 主应用中清除所有Yi激活的子应用沙箱缓存const refreshAllApp = => { // 找到所有无界子应用的iframe const ALL_SUB_IFRAME = window.document.querySelectorAll; if { console.warn; return; } // 拿到这些iframe里面的contentWindow const ALL_SUB_WINDOW = .map => .contentWindow, ); // 依次执行清除 ALL_SUB_WINDOW.forEach => v.__WUJIE?.inject?.idToSandboxMap?.clear);};export { refreshAllApp, refreshApp };

主应用/src/layouts/basic.vue 程序主界面在头部引入上述文件并在相应位置调用清除沙箱方法

主应用src下添加wujie文件夹并添加index.ts文件，两个函数实现功Neng是清理沙箱缓存数据，保证在”退出登录重新打开“样式不会异常，refreshApp函数为后续单个页签关闭提供备用支持。

为啥要清除沙箱数据呢？害，你想啊，Ru果不清除，用户退出登录后重新登录，样式可Neng会出问题。

64:微前端架构下多子系统数据整合的可视化效果.项目地址:

近期也尝试wujie微前端框架发现Neng满足我当前的所有诉求，所以有了本篇的文章内容，前两篇文章的功Neng和问题在本文中douYi支持，选择wujie原因是支持以下两个功Neng:

状态管理:可选集成Pinia,提供geng轻量的响应式状态管理.

# 安装wujiepnpm i wujie# 安装wujie-vue3pnpm i wujie-vue3 为什么百度不收录我的文章呢？

这个问题啊，说实话，我也遇到过你Ke以检查一下你的文章质量、关键词优化等方面不对不对，应该是网站权重、内容原创性等等。

<script setup lang="ts">import { ref } from 'vue';import { useRoute } from 'vue-router';import { preferences } from '@vben/preferences';import { useAccessStore, useUserStore } from '@vben/stores';import WujieVue from 'wujie-vue3';const useStore = useUserStore;const accessStore = useAccessStore;const route = useRoute;// props通信const props = ref;// 加时缀是强制刷新const appUrl = ref}`);const keepLive = route.meta?.keepAlive;</script><template> <div class="sub-app-container"> <WujieVue width="%" height="%" :name="appUrl" :url="appUrl" :alive="keepLive" :props="props" /> </div></template><style scoped>.sub-app-container { width: %; height: %; background: white;}</style><style scoped>.sub-app-container { width: %; height: %; overflow: hidden; background: white; border-radius: 8px;}</style>

. 添加微服务通用页面wujie.vue

// 初使化存储之后赋值，避免路由判断跳转到登录页if { // props 接收 const props = window.$wujie?.props; // {data: xxx, methods: xxx} const useStore = useUserStore; const accessStore = useAccessStore; useStore.setUserInfo; accessStore.setAccessToken; updatePreferences;} 四。新增路由配置

. 在主应用路由中配置子应用一个测试路由 /app/basic/test，聪明的你，一定知道实现的逻辑。

# 引用的例子import { refreshAllApp } from '#/wujie/index';# logoutasync function handleLogout {await authStore.logout;refreshAllApp;} 本文将为您详细介绍如何在vue-vben-admin项目中快速集成vben admin管理系统集成了微前端wujie吗？答案是：集成了！并且实现了hen多有趣的功Neng，比如清除沙箱数据、状态管理等等。 使用Vben Admin集成微前端wujie是一个不错的选择，说实话，我自己也尝试过并且取得了不错的效果。 上述功NengYi集成在前端程序里Ru果我的文章对你有帮助，感谢给我点个🌟 用户提供了引用相关的信息等。