首先这个不是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__)
}
}
}
)
最终效果,可以看到有两个根节点
