前言
这个问题困扰了我很长一段时间,尝试过各种方法,如:升降插件版本、在main.ts文件中配置element-plus的默认语言locale、在应用层配置el-config-provider、也询问过多位经验丰富的前辈,他们也从未遇到过...而我工龄还未满一年...真是令人头痛的问题。
一、问题描述
项目中,所有用到element-plus el-date-picker 的地方,其UI展示都是错乱的,即便不用F12查看dom元素,也能看出是国际化出了问题。
起初,测试给我提这个BUG的时候,他也不知道项目中所有的日期控件都存在该问题,也不知该如何复现。不知道复现步骤,这让我在排查的时候,有一定的困难。
一开始改过,不知道复现步骤,以为好了,后边再提出这个问题,再次排查的时候才发现复现的方法,重新登录,百分百必现,刷新该页面,就恢复正常。
二、问题排查历程
1、自身问题
刚开始,以为是使用姿势不对,于是随便重新敲了一遍,哎,发现好了(实际上是刷新过页面了)。
2、vue-i18n问题
看着就是国际化出了问题,就查了vue-i18n与el-date-picker的相关资料,但只查到一个类似的问题,说是vue-i18n和element-plus不兼容导致的,也尝试了修改,但毫无作用。此处的问题在于,另一个同源项目,使用插件版本一样,但却没有出现这个问题,这令我百思不得其解。
3、问题源头-vue3-eventbus兼容性问题
随后也看了el-date-picker相关的源码,确定了是数据在进来的时候出了问题,因为刷新页面后,UI又恢复正常,加上上述提到了兼容性问题,我寻思着是插件间的兼容性问题,便通过比对两个同源项目package.json中引用的插件,挨个把有差异的插件去除或更换成相同版本,最终,确定了问题的源头,是vue3-eventbus引起的,将之移除,问题解决!!!。