qiankun子应用无法使用vue devtools如何解决

2021/12/16 posted in  微前端
Tags:  #qiankun

解决办法:将子应用的实例挂载为主应用的一个组件。

  1. 子应用:
new Vue({ 
  el: '#app',
  mounted() {
    if (window.__POWERED_BY_QIANKUN__ && process.env.NODE_ENV === 'development') {
        // 将子应用实例挂载到window.__QIANKUN_SUB_APP_VM__  方便主应用获取
      window.__QIANKUN_SUB_APP_VM__ = this
    }
  }
})
  1. 主应用
let rootInstance = new Vue({ 
    // ...
 })
registerMicroApps(apps, 
  {
    afterMount: () => {
      if (window.proxy.__QIANKUN_SUB_APP_VM__ && process.env.NODE_ENV === 'development') {
        rootInstance.$children.push(window.proxy.__QIANKUN_SUB_APP_VM__);
      }
    }
  }
)

« 前端开发规范参考 【Vue3】基础与入门 »