微前端qiankun子应用无法使用vue devtools解决办法

首先这个不是qiankun框架的问题，官方的issues中有说明

[反馈]使用qiankun时，vue-devtools无法调试子项目 · Issue #601 · umijs/qiankun · GitHub

按照issues中说明，在主应用是vue子应用是vue中会存在此种情况。

解决办法主要是让vue-devtools感知到子应用也是一个vue组件，默认qiankun是开启的singular

1.在子应用中挂载成功后在window上挂载子应用的vm，请注意window的变量污染

new Vue({ 
  el: '#app',
  mounted() {
    if (window.__POWERED_BY_QIANKUN__ && process.env.NODE_ENV === 'development') {
      // 全局挂载子应用vm
      window.__QIANKUN_SUB_APP_VM__ = this
    }
  }
})
复制代码

2.主应用中在微应用挂载后在主应用的vm中$children中挂载子应用的vm

let mainVm = new Vue({ el: '#main-app' })
// qiankun配置参数registerMicroApps
registerMicroApps(
  [
     // 你的子应用配置
  ],
  {
    afterMount: () => {
      if (window.__QIANKUN_SUB_APP_VM__ && process.env.NODE_ENV === 'development') {
        mainVm.$children.push(window.__QIANKUN_SUB_APP_VM__)
      }
    }
  }
)

复制代码

最终效果，可以看到有两个根节点