同一页面运行Vue2与Vue3及Vuetify的多实例错误排查

1. 隔离Vue2与Vuetify2的作用域，避免全局冲突 #

冲突根源大概率是Vuetify2初始化时，误与Vue3遗留的内部全局标识（如$attrs/$listeners相关绑定）发生干扰。可通过以下步骤解决：

步骤1：重命名全局Vue2实例 #

注入Vue2的esm bundle后，立即修改其全局挂载名，避免与潜在标识混淆：

// 注入Vue2 bundle后执行
window.Vue2 = window.Vue;
delete window.Vue;

步骤2：手动传入Vue2实例初始化Vuetify2 #

Vuetify2的UMD包支持手动传入Vue实例，无需依赖全局Vue变量：

// 注入Vuetify2 bundle后执行
const Vuetify2 = window.Vuetify;
delete window.Vuetify;

// 手动关联Vue2与Vuetify2
Vue2.use(Vuetify2);

// 创建Vue2实例时正常使用Vuetify2
const vue2App = new Vue2({
  el: '#vue2-app',
  vuetify: new Vuetify2({
    // Vuetify2配置项
  }),
  // 其他实例选项
});

2. 用IIFE完全隔离Vue2与Vuetify2的运行环境 #

如果上述方法仍有冲突，可将Vue2和Vuetify2的注入、初始化逻辑包裹在独立的立即执行函数中，创建封闭作用域彻底隔离：

(function() {
  // 动态加载Vue2
  const vue2Script = document.createElement('script');
  vue2Script.src = '/path/to/vue2.esm.js';
  vue2Script.onload = () => {
    // 动态加载Vuetify2
    const vuetify2Script = document.createElement('script');
    vuetify2Script.src = '/path/to/vuetify2.js';
    vuetify2Script.onload = () => {
      // 提取局部实例并清理全局挂载
      const Vue = window.Vue;
      const Vuetify = window.Vuetify;
      delete window.Vue;
      delete window.Vuetify;

      // 初始化并创建Vue2应用
      Vue.use(Vuetify);
      new Vue({
        el: '#vue2-app',
        vuetify: new Vuetify({ /* 配置项 */ }),
      });
    };
    document.head.appendChild(vuetify2Script);
  };
  document.head.appendChild(vue2Script);
})();

3. 调整加载顺序，优先初始化Vue2（可选） #

若业务允许，可先完成Vue2+Vuetify2的初始化，再启动Vue3，从根源上减少冲突概率：

// main.ts
async function initVue2() {
  return new Promise((resolve) => {
    const vue2Script = document.createElement('script');
    vue2Script.src = '/path/to/vue2.esm.js';
    vue2Script.onload = () => {
      const vuetify2Script = document.createElement('script');
      vuetify2Script.src = '/path/to/vuetify2.js';
      vuetify2Script.onload = () => {
        window.Vue.use(window.Vuetify);
        new window.Vue({
          el: '#vue2-app',
          vuetify: new window.Vuetify({ /* 配置项 */ }),
        });
        resolve(true);
      };
      document.head.appendChild(vuetify2Script);
    };
    document.head.appendChild(vue2Script);
  });
}

// 等待Vue2初始化完成后，启动Vue3
initVue2().then(() => {
  import('vue').then(({ createApp }) => {
    import('./App.vue').then(({ default: App }) => {
      import('./router').then(({ default: router }) => {
        import('./vuetify3').then(({ default: vuetify }) => {
          createApp(App).use(router).use(vuetify).mount('#app');
        });
      });
    });
  });
});

内容的提问来源于stack exchange，提问作者TheGeekZn