微前端无界(wujie)解决子应用无法使用vue-devtools

环境

主应用为vue 3.2.x + ts +vite 4.x，子应用同样如此。采用 Tencent-wujie 微前端框架，官方封装的 wujie-vue Vue框架。

解决方案（缺陷）

1. 因为项目有将主应用 window 传递给子应用，在子应用 main.js 中加入下面这段代码即可

/** 开启 vue devtools */
    const { window: w } = window?.$wujie?.props?.data;
    w.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push({
      // 以下字段一个不能少
      app: instance,
      version: instance.version,
      types: {
        Comment: Symbol('Comment'),
        Fragment: Symbol('Fragment'),
        Static: Symbol('Static'),
        Text: Symbol('Text'),
      },
    });

先判断是否在 无界 环境下，在判断是否在 开发 环境即可。instance 为 vue 实例

2. 若没有 1的前提，也可以在子应用中将 vue 实例通过 emit 传给主应用，主应用 on 监听到然后再执行 上述代码片段插入。

缺陷

切换路由，devtools 无法跟着变化，还得关闭控制台，刷新页面后在进入方可。目前还没找到解决方案。