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

5,263 阅读1分钟

首先这个不是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__)
      }
    }
  }
)

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

rBAoL18RECGAWsh7AAAa6TioeJs702.png