Vue3通过Composer加载vendor目录组件时使用slot报错问题排查

你定位的双Vue实例问题完全正确：通过Composer引入的独立组件库自身携带了独立的Vue运行时依赖，和主项目的Vue运行时是两个完全独立的实例，Vue3的插槽、响应式等核心能力依赖全局唯一的运行时上下文，因此触发相关报错。npm引入无异常是因为npm默认会做依赖提升，仅保留主项目声明的Vue版本作为唯一实例。

你可以按以下优先级尝试修复：

方案1：修改Webpack别名强制统一Vue实例（最稳妥） #

在你现有webpack.mix.js的resolve.alias配置中，新增Vue相关包的强制指向规则，让所有导入Vue生态包的请求都优先走主项目的依赖：

mix.webpackConfig({
    resolve: {
        alias: {
            '@ui' : path.resolve(__dirname, 'vendor/companyname/ui/src'),
            // 新增以下规则，所有Vue相关依赖强制使用主项目node_modules下的版本
            'vue': path.resolve(__dirname, 'node_modules/vue'),
            '@vue/runtime-core': path.resolve(__dirname, 'node_modules/@vue/runtime-core'),
            '@vue/reactivity': path.resolve(__dirname, 'node_modules/@vue/reactivity'),
            '@vue/shared': path.resolve(__dirname, 'node_modules/@vue/shared')
        }
    }
});

配置后重新启动编译服务即可生效。

方案2：临时快速验证问题 #

直接删除组件库目录下的node_modules文件夹：vendor/companyname/ui/node_modules，此时Webpack找不到组件库内的Vue依赖，会自动向上查找使用主项目的Vue实例，即可快速验证是否是双实例导致的问题。

方案3：优化组件库配置（长期方案） #

在独立组件库的package.json中做如下调整：

• 将dependencies中的Vue相关依赖全部移到peerDependencies中，声明宿主项目需要提供Vue 3.x作为依赖
• 组件库本身不打包Vue运行时代码，仅输出.vue单文件组件或无依赖的编译后代码
  调整后重新发布组件库到Composer仓库即可，后续拉取的组件库不会自带Vue依赖，从根源避免双实例问题。

补充说明 #

为什么把组件复制到本地就正常？因为复制到主项目目录后，Webpack解析组件的依赖时会直接使用主项目的依赖目录，不会去加载组件库自带的Vue，因此不会触发双实例冲突。

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