vue结合qiankun无法使用vue devtools调试子项目

问题描述

vue项目配合qiankun实现微应用

vue devtools中无法展示子应用的结构

sub test01无法通过vue devtools查看

解决方案

在子项目中vue实例后，挂在到主项目

// 以下代码都要注意在开发环境开启即可
  if (process.env.NODE_ENV === 'development') {
    var subDiv = document.createElement('div')
    subDiv.__vue__ = instance
    document.body.appendChild(subDiv)
  }

结果：

会出现两个root，第二个就是子项目的root

改进

在render中会在body中添加一个div，并且永久无法删除，

改进一下，在mount中绑定实例，并且在unmount中删除绑定

export async function mount(props) {
  console.log('[vue] props from main framework', props)
  commonStore.globalRegister(store, props)
  ajax.init(store, ajaxOption)
  render(props)

  // 以下代码都要注意在开发环境开启即可
  if (process.env.NODE_ENV === 'development') {
    var subDiv = document.createElement('div')
    subDiv.id = name
    subDiv.__vue__ = instance
    document.body.appendChild(subDiv)
  }
}

export async function unmount() {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
  
  if (process.env.NODE_ENV === 'development') {
    document.getElementById(name).remove()
  }
}

name为：

const { name } = require('../package.json')

注意

当子项目加载后，如果vue devtools中没有挂在子项目的实例，点击一下右上角刷新试试