i_am_a_div_日积月累_ 2023-07-25 09:57 采纳率: 66.7%
浏览 28
已结题

前端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的项目里,也是如上引用和使用的,但是就报错!

  • 写回答

1条回答 默认 最新

  • 孤月葬花魂 2023-07-25 10:30
    关注

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

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 7月27日
  • 创建了问题 7月25日

悬赏问题

  • ¥15 django5安装失败
  • ¥60 ios系统storm sniffer 写入http规则加密如何破解?
  • ¥15 Java与Hbase相关问题
  • ¥15 后缀 crn 游戏文件提取资源
  • ¥15 ANSYS分析简单钎焊问题
  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上
  • ¥20 WPF 如何实现多语言,label 和cs(live Charts)中是否都能翻译