Le problème est qu'il est difficile voire impossible que les applications Vue 2 et 3 cohabitent dans un même projet car elles dépendent du même nom mais de versions différentes vue 包。即使可以使用不同名称的 vue 包别名或使用模块化 Vue（import Vue from 'vue'）作为一个版本和 Vue CDN (window. Vue) Pour une version en code 1ère partie, un autre problème à résoudre C'est le Bibliothèque Vue qui nécessite l'utilisation d'une version spécifique de Vue.

Cela nécessite de créer et de regrouper la sous-application en utilisant sa version et sa bibliothèque Vue préférées, ce qui est très proche du concept d'application micro-frontend.

Supposons que vous disposiez d'une sous-application Vue 3 qui utilise une bibliothèque spécifique à Vue 3 (tinymce-vue) et est écrite spécifiquement pour exposer toutes les API publiques afin de communiquer avec le monde extérieur :

let MyV3Comp = {
  template: `<div>{{ myV3Prop }} {{ myV3Data }}</div`,
  props: ['myV3Prop'],
  emits: ['myV3Event'],
  setup(props, ctx) {
    const myV3Data = ref(1);
    const myV3Method = () => {};

    ctx.emit('myV3Event', Math.random());

    // Component public api needs to be exposed to be available on mount() instance
    ctx.expose({ myV3Data, myV3Method });

    return { myV3Data, myV3Method }

  },
};

// Sub-app entry point
let createMyV3App = initialProps => createApp(MyV3Comp, initialProps);
export default createMyV3App;

Les composants wrapper de Vue 2 agissent comme un pont entre les sous-applications Vue 3 et le reste de l'application Vue 2 :

import createMyV3App from '.../my-v3-app-bundled';

let MyV2WrapperComp = {
  template: `<div ref="v3AppWrapper"></div>`,
  props: ['myV2Prop'],
  emits: ['myV2Event'],
  data() {
    return { myV2Data: null };
  },
  methods: {
    // Sync wrapper events
    onMyV3Event(v) {
      this.$emit('myV2Event', v);
    }
  },
  watch: {
    // Sync wrapper props and data
    myV2Data(v) {
      this.v3AppCompInstance.myV3Data.value = v;
    },
    myV2Prop(v) {
      // Hacky! Better use data and methods from public api to pass info downwards
      this.v3AppCompInstance._instance.props.myV3Prop = v;
    },
  },
  mounted() {
    // Vue 3 automatically translates onMyV3Event prop as myV3Event event listener
    // Initial prop values make app props reactive
    // and allow to be changed through _instance.props
    this.v3App = createMyV3App({ onMyV3Event: this.onMyV3Event, myV3Prop: null });

    // also available as undocumented this.v3App._instance.proxy
    this.v3AppCompInstance = this.v3App.mount(this.$refs.v3AppWrapper);

    // Sync wrapper data
    // Hacky! Better use event from public api to pass info upwards
    this.v3AppCompInstance._instance.proxy.$watch('myV3Data', v => this.myV2Data = v);
  },
  unmounted() {
    this.v3App.unmount();
  },
};

Si les wrappers et sous-applications nécessitent une synchronisation supplémentaire basée sur des points spécifiques, tels que provide/inject, des références de modèles, etc., cela doit être implémenté concrètement. À cet égard, ce n'est pas différent de l'adaptateur Vue 3->Vue 2 ou des adaptateurs impliquant d'autres frameworks (Angular, React).