微前端：使用Wujie融合RuoYi-Vue2 和 RuoYi-Vue3

原创已于 2026-02-09 17:22:05 修改 · 1.1k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

于 2026-02-09 11:10:40 首次发布

算是技术储备，以免需求来时慌不择路。
如果你需要以vue3+vite为基座，vue2为子项目，可以考虑Wujie。
考虑过使用qiankun，京东的MicroApp，最终选择了腾讯的wujie。
qiankun3迟迟没出，qiankun2长期没更新，且vite项目需要引入vite-plugin-qiankun；
无界（Wujie）相比 MicroApp，真正的“原生级” Vite 支持，JS 沙箱隔离更彻底等，所以选择了Wujie。

改造步骤

这里先给出改造完后的源代码地址：https://gitee.com/benxiaohai1071/ruoyi-wujie-demo
本demo没提供后台，如果需要可以本地启动ruoyi-cloud后台。以ruoyi-vue3为主应用，ruoyi-vue2为子应用。
后续会出无需后台的纯前端版本。欢迎star

一、下载源代码

分别下载ruoyi-cloud中ruoyi-vue2和ruoyi-vue3源代码放在一个文件夹中。
在这里插入图片描述

二、最外层新建package.json和.gitignore

package.json —— 项目的“总指挥中心”

核心功能：
一键安装依赖：
- install:all ：通过一条命令，分别进入 RuoYi-Cloud-Vue3 执行 yarn ，进入 RuoYi-Cloud-Vue2 执行 npm install 。
一键启动开发环境：
- dev ：利用 concurrently 插件，同时启动主应用和子应用。你不需要开两个终端分别去启动项目，只需在根目录运行 npm run dev 即可。
一键打包构建：
- build ：同时触发两个项目的生产环境打包命令。
关键依赖：
concurrently : 这是一个专门用于并行执行多个命令的工具，实现“一键启动”。

.gitignore —— Git 版本的“过滤器”

这个文件告诉 Git 哪些文件不需要提交到代码仓库中。

三、安装依赖&代码修改

1、安装依赖

npm run install:all

2、代码修改

下边只做了关键修改记录，具体可参考
修改1
修改2

1） RuoYi-Cloud-Vue2修改

① .env文件配置端口，如RuoYi-Cloud-Vue2/.env.development

# 子应用端口
VUE_APP_PORT = 83

②RuoYi-Cloud-Vue2/vue.config.js修改，配置子应用端口、允许跨域等
③RuoYi-Cloud-Vue2/package.json文件修改
因为运行的nodejs版本较高，没向下兼容，会报错（报错不影响运行）

    "dev": "set NODE_OPTIONS=--openssl-legacy-provider --no-deprecation && vue-cli-service serve",
    "build:prod": "set NODE_OPTIONS=--openssl-legacy-provider --no-deprecation && vue-cli-service build",
    "build:stage": "set NODE_OPTIONS=--openssl-legacy-provider --no-deprecation && vue-cli-service build --mode staging",

④删除RuoYi-Cloud-Vue2/public/index.html中动画效果。

<div id="loader-wrapper">
   <div id="loader"></div>
   <div class="loader-section section-left"></div>
   <div class="loader-section section-right"></div>
   <div class="load_title">正在加载系统资源，请耐心等待</div>
 </div>

⑤修改RuoYi-Cloud-Vue2/src/App.vue，防止路由切换时组件不更新的问题，以及切换路由时闪上一个页面内容

<router-view :key="$route.fullPath" />

⑥修改RuoYi-Cloud-Vue2/src/layout/index.vue文件，该文件主要是去除vue2的setting、Sidebar等，跳转到vue2页面时，只展示内容即可。具体可以去仓库查看

⑦修改RuoYi-Cloud-Vue2/src/main.js，主要是获取主应用传来的 token、监听主应用主题变化等

if (window.__POWERED_BY_WUJIE__) {
  // 1. 获取主应用传来的 token
  const props = window.$wujie?.props;
  if (props?.token) {
    const { setToken } = require("@/utils/auth");
    setToken(props.token);
  }
  // 1.1 初始化主题
  if (props?.theme) {
    store.dispatch("settings/changeSetting", {
      key: "theme",
      value: props.theme,
    });
  }
  // 2. 【核心修复】监听主应用的跳转指令
  window.$wujie.bus.$on("vue3-router-change", (path) => {
    // 只有当路径不一样时才跳转，避免重复报错
    if (router.currentRoute.path !== path) {
      router.push(path).catch((err) => {
        // 忽略 NavigationDuplicated 报错
      });
    }
  });

  // 监听主应用主题变化
  window.$wujie.bus.$on("theme-change", (theme) => {
    store.dispatch("settings/changeSetting", {
      key: "theme",
      value: theme,
    });
  });
}

⑧相关路由处理

2） RuoYi-Cloud-Vue3修改

①修改.env文件，如RuoYi-Cloud-Vue3/.env.production，配置子应用地址
②新增RuoYi-Cloud-Vue3/src/layout/microLayout.vue文件，修改RuoYi-Cloud-Vue3/src/store/modules/permission.js、RuoYi-Cloud-Vue3/src/main.js等文件，判定当点击monitor、tool模块时，指向Wujie容器组件。

主要修改点

1、主应用中store修改，子应用同步
2、当页面停留在子应用时，刷新浏览器，要处理此时子应用加载空白效果，减缓子应用加载时长，使用保活模式，注意预加载，切换页面时是上一个页面问题
3、外层打包命令处理，添加readme文件
4、子应用路由处理
5、子应用地址和端口处理成配置项
6、停留在子应用页面，这时token过期，调用接口，弹框重新登录，得处理成主应用跳转登录