前端npm封装插件发布成功,引用报错

报错信息:

引入自定义封装插件报错,项目能启动起来,但是页面加载报错

 Cannot read properties of undefined (reading 'call')

img

问题描述:

首先有三个vue项目:
demo1:用来封装插件的项目(使用ant-design-vue的a-button等组件,封装一个了插件A)
demo2:一个新建的vue项目,用来使用插件A
demo3:公司的项目,本身就是用了ant-design-vue,且版本和插件里的一样。

现在情况是,我在项目demo1,使用ant-design-vue的a-button组件封装了插件A,然后项目demo2里使用插件A,没问题。
但是我在公司的项目demo3里使用插件B就报错了。我能想到报错的原因就是,插件B和我公司的项目demo都使用了ant-design-vue而导致的报错。报错信息和封装引用如下,麻烦各位看下如何解决!

自定义插件的封装和引用:

demo1里的封装插件的index.js入口文件:

import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
Vue.use(Antd, {
  locale: zhCN,
});
Vue.use(Antd)

// 引入lodash
import _ from 'lodash'
Vue.prototype._ = _

import moment from 'moment'
Vue.prototype.moment = moment


// 引入封装好的组件
import ApuInput from '@/package/apu-input/index.vue';
import ApuButton from '@/package/apu-button/index.vue';
// import ApuEditForm from '@/package/apu-edit-form/index.vue';
const coms = [ApuInput,ApuButton]; // 将来如果有其它组件,都可以写到这个数组里



// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com); //com.name的name就是你自定义封装的组件的name:'apu-xx',后期在个人项目B里使用的就是<apu-xx></apu-xx>
  });
};

export default install; // 这个方法以后再使用的时候可以被use调用

这是在demo2里使用插件A,没有问题:

img

在demo3的项目里,也是如上引用和使用的,但是就报错!

自己封装的组件就老老实实放在项目里边,放在ant-design里边算怎么回事,别人再开发的话还会出现同样的问题