报错信息:
引入自定义封装插件报错,项目能启动起来,但是页面加载报错
Cannot read properties of undefined (reading 'call')
问题描述:
首先有三个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,没有问题:
在demo3的项目里,也是如上引用和使用的,但是就报错!