视频流媒体平台EasyNVR使用Vue.js开发报[Vue warn]错误问题解决方案

Vue.js是一套构建用户界面的渐进式框架,容易学习,也容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js也能完美地驱动复杂的单页应用,因此,我们的项目团队在进行视频流媒体服务器的开发时,会将Vue.js与其他库一起进行开发。

EasyNVR前端组件冲突

近期由于我们的各项流媒体平台都在进行新版本的研发,在使用Vue开发EasyNVR时,就遇到了开发报错的问题,报错如下:
[Vue warn]: The computed property “fields” is already defined in data.

问题分析

1、从报错日志来看,很明显问题是fields属性被重复声明了多次。
2、于是开始在整个项目中搜索fields字段。由于笔者使用PHPStorm,很简单就可以实现find in path,但竟然没搜到。
3、我突然想到,我们在开发时,默认忽略了node_modules文件,所以问题一定出现在我们引用的数据包,与现有数据包产生了冲突。

由于项目初始,我们仅引用了两个包,其一为ElementUI,其二为vee-validate;查阅了一下文档,发现了vee-validate作者很有先见预料了这个问题,在他的文档里的配置项Configuration里面是这样写的:

在config对象中,可以清楚的看到fieldsBagName:fields配置项,在errorBagName注释中可以看到,change if property conflicts,意思就是在发生属性冲突的情况下,去更改它。

解决问题

定位到导入的源代码处,修改为

此处将errors改为了errorBags,至此就不会与ElementUI的组件冲突了。保存后查看页面,此时又有新报错:

分析是errors名字改为errorBags后,之前的代码用到errors就找不到了,

然后将这些errors改为errorBags就可以了

至此修复组件冲突成功。

posted on 2020-07-27 11:46  EasyNVR  阅读(180)  评论(0编辑  收藏  举报