乾坤微前端—开发工具vue devtools无法识别子应用

问题

在开发微前端的项目时发现谷歌插件Vue.js devtools只能识别主应用，无法识别出子应用来。这给开发带来了不便

原因百度吧，这里不过多解释了，现在介绍自己项目中使用的解决办法，

解决方案：

父应用先去获得子应用实例，然后添加到自己实例的$children中，这样开发工具就能识别到。

具体步骤代码

第一步：在主应用main.js中添加

// 省略部分代码

const mainVm = new Vue({
  store,
  router,
  render: h => h(App),
}).$mount("#container");

// 省略部分代码


const Vms = {};
window.setVm = (key, vm) => (Vms[key] = vm);


// 省略部分代码

registerMicroApps(
  {
    afterMount: [
      app => {
        //让vue devtools插件能够识别子应用
        const vm = Vms[app.name];
        if (vm && process.env.NODE_ENV === "development") {
          mainVm.$children.push(vm);
        }
      },
    ],
  }
);
// 省略部分代码

第二步：在子应用main.js中

// 省略部分代码

function render() {
    instance = new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount('#smaApp');

    if (process.env.NODE_ENV === 'development') {
      // 把子应用vm传给父应用
      window.setVm('sma-manager', instance);
    }
}

// 省略部分代码

要注意我是用app.name作为key值去取vue实例，所以在子应用的时候要确保window.setVm第一个参数name相同，当然你也可以自定义，看自己需求。

效果