开发时拿到所有vue组件实例, 代替vue devtools

vue-instance.ts

import Vue, { VNode, RenderContext, CreateElement } from "vue";

declare global {
  interface VueComponents {
    [key: string]:
      | Vue
      | ((createElement: CreateElement, hack: RenderContext) => VNode)
      | undefined;
  }
  interface Window {
    vi: VueComponents;
  }
}

interface VueInstanceRoot extends Vue {
  vi?: VueComponents;
}

if (process.env.NODE_ENV !== "production") {
  window.vi = {};
  const GlobalMixin = Vue.extend({
    mounted() {
      const name = this.$options.name;
      if (!name || name.startsWith("El") || name === "transition") {
        return;
      }
      if (this.$el.className?.includes("el-")) {
        return;
      }
      window.vi[name] = this;
      if (window.__POWERED_BY_QIANKUN__) {
        const root = this.$root as VueInstanceRoot;
        if (!root.vi) {
          root.vi = {};
        }
        root.vi[name] = this;
        console.log(name, this);
      }

      window.vi[`${name}Render`] = this.$options.render;
    },
  });
  Vue.mixin(GlobalMixin);
}