Vue 3迁移时挂载Vue 2组件库报错，寻求技术解决方案

错误1修复：layoutComponents 属性不存在 #

你错误地尝试从 app 实例上获取 layoutComponents，但这个变量是你通过 import 导入的模块，和Vue实例无关。直接使用导入的 layoutComponents 即可：

const layoutComponent = layoutComponents[layoutComponentName];

错误2修复：window.App 不存在 #

Vue3 不会自动将App实例挂载到window对象上，原Vue2的window.Vue在Vue3中依然是全局Vue对象（若通过CDN引入），需调整全局注册逻辑：

if (typeof window !== 'undefined' && window.Vue) {
  // Vue3中通过createApp创建实例后注册插件
  window.Vue.createApp({}).use(ComponentLibrary);
}

插件install函数的最佳实践 #

你的install函数依赖了外部的app变量，会导致插件只能被当前创建的app实例使用，不符合插件复用性要求。应使用install函数的参数（即app实例）来注册组件：

const ComponentLibrary = {
  install(app) {
    // 注册普通组件
    for (const componentName in components) {
      const component = components[componentName];
      app.component(component.name, component);
    }
    // 注册布局组件
    for (const layoutComponentName in layoutComponents) {
      const layoutComponent = layoutComponents[layoutComponentName];
      app.component(layoutComponent.name, layoutComponent);
    }
  },
};

完整修正后的main.ts代码 #

import './styles/imports.scss';
import * as components from './components';
import * as layoutComponents from './layouts';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

const ComponentLibrary = {
  install(app) {
    // components
    for (const componentName in components) {
      const component = components[componentName];
      app.component(component.name, component);
    }
    // layouts
    for (const layoutComponentName in layoutComponents) {
      const layoutComponent = layoutComponents[layoutComponentName];
      app.component(layoutComponent.name, layoutComponent);
    }
  },
};

export default ComponentLibrary;

// 全局环境下自动注册插件
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.createApp({}).use(ComponentLibrary);
}

// 挂载应用
app.mount('#app');

额外提示 #

• 确保你的Vue2组件库中的组件兼容Vue3，若使用了Vue2专属API（如this.$on、全局过滤器等），需进一步修改组件代码适配Vue3规范。
• 若在项目内使用该组件库，直接在创建app实例后调用app.use(ComponentLibrary)即可，无需依赖全局window.Vue。

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