MCong’s Blog 👋🏼

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 Element Plus中tag跳转锚点后tag消失 背景介绍 此问题还是在前边的演示demo可视化项目中遇到的一个问题，页面根据对应的tag点击后跳到对应得地方类似于返回顶部的操作 问题描述 在描述问题前先简单的看一下这个锚点是怎么写的吧。 锚点实现 因为是父组件的tag标签跳到子组件页面对应的地方，所以要在子组件绑定ref对象，如图所示 绑定完成对象后需要在tag的事件中调用锚点跳到子组件的锚点位置，这里因为一共需要四个锚点，所以我把它抽成了函数，以方便复用 下图为抽出来的函数，大致思路是利用父组件的ref对象来获取到子组件的ref对象，然后让它滚动到页面对应的锚点 在子组件锚点位置绑定对应的ref对象，这里就展示两个，其余两个就不展示了，同样是绑定ref，就不赘述了 简单介绍完锚点实现后，刚开始确实没有问题，并且可以正常跳到对应的锚点，突然有一天，不知是代码冲突还是什么其他原因，再次点击tag时，发现tag整体往上跑了，导致tag消失， 如图所示，当我点击了第二个或其他....

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 iconfont图标打包消失 背景介绍 前一段时间刚接了一个项目是一个演示的demo可视化项目，相对还是比较简单的，并且公司前期为了节约开发时间，特意做了一个通用的项目模板，架子基本都是搭建好的，只需要根据项目需求来进行细节修改 问题描述 项目开发过程中，领导想要看到每天的进度，于是就就代码打包部署到了服务器中，部署上去时候发现icon图标要么就变成了空白的，要么就变成其他图标，如下图所示 正常显示的图标应该为下图的样子因为项目是还在开发过程中部署的，有些图标还没来得及更换但本地的图标和打包后的图标严重不符合 解决方法 看到这样，我第一反应是两个iconfont图标库冲突导致的，此项目用到了两个图标库，一个是项目前我自己创建的图标库，另一个是为节约开发时间，UI帮助我们找的iconfont图标库。所以第一时间以为是冲突导致的，后面发现解决冲突后，这块就不具体讲了这些图标就都变成空白了，于是就怀疑打包过程中并没有打包上这些icon font文件，从而导致的字体图标消失，在看了打包文....

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 v-for后渲染列表为空（偶发性） 背景介绍 因为工作原因，其他部门的同事交接了一个某管理系统，因为这个项目时因为甲方还未完全验收通过2022年底验收通过，而且我这个项目组是新成立的，专门做甲方这边的相关的项目，其他部门的项目就交接过来了，这个系统也是很简单的系统，是查询某地区的税收情况的一个系统，整个系统就是一个导出、查询的功能，相对比较简单 问题描述 这个问题是在熟悉代码时的某天发现的，触发的还挺频繁的，但也不是百分百触发，当我搜索某个企业名称后，将企业名称删除重新搜索，就会出现下图的情况，所有的信息都渲染不出来，只有几个筛选条件和几个按钮这里只是拿企业名称举例子，其他收索条件收索后也是一样的问题，除非刷新页面，才会恢复正常，否则会一直是空白状态 解决方法 刚看到这个问题时，我以为是后端服务出了问题，就打开了控制台，发现后端响应码是200，并且有数据返回 这时候我发现事情远远没有那么简单，于是就开始寻找bug之旅，首先我找到了发生问题的代码，看了一下，这一块代码也非常简单，....

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 computed类型错误 问题描述 此Bug是朋友碰到的一个Bug，大概问题为在项目中控制台报错computed应该是一个Object，但是定义的是一个Function的一个错误，如下图， 当刚看到这个错误时以为是朋友那边粗心大意的把computed的类型写错了，但是看了对应的页面发现代码也没有错，但这个报错就是存在。 解决方法 为了节约时间，通过远程来解决问题，远程过去后看到代码确实没有问题，computed中写的是vuex的辅助函数，也是很简单的逻辑，于是我尝试着注释掉相关的代码，看下控制台还有没有报错，发现就算注释掉这段代码，控制台还是会报相同的错误，于是我便想到了computed它是会有缓存的，是不是缓存造成的呢？经过一系列的操作后，将浏览器强制刷新一下，然后又重启了一下项目，发现还是相同的地方，相同的错误，这时候感觉到这个bug并没这么简单，于是就换了一个思路，在整个项目全局搜索了一下computed后发现几乎每个页面都会有一个空的computed属性，大概一二十个页面，只有....

此系列均为工作或生活中遇到的各种bug，为记录bug而生的，不希望其他人因为这些bug而纠结 页面无限刷新 问题描述 某天在登录公司的项目时，点击登录之后，发现页面无限月读（一直刷新并且报错） 解决方法 这个bug相对来说还是比较简单的，因为页面有一个Toast，已经提示了什么原因，于是我进入vscode开始全局收索这个描述，发现报错的地方为一个封装的路由守卫信息的一个文件中的提示，如下图所示 于是第一时间并未怀疑是代码出了问题，而是以为网络问题导致的ps：因为项目需求我们整个项目组刚换办公地点，新地点暂时需要连vpn办公，当我重新开一下vpn、重置网络一系列操作后，发现还是会有这个问题，于是就开始怀疑代码问题，打开控制台发现控制台有一个报错，根据报错信息发现是因为一个名为workplace的东西引起的，并且已经告诉了我报错地点在文件名为cptList.js的第44行代码，如下图所示 有了这些报错信息就好办了，找到这个文件后发现，此处逻辑也很简单，我就不多赘述了，如下图 看到了这里，发现昨天ps:发现bug的昨天修改的文件中没有考虑到本地存储为空的情况，快要下班了，没有考虑那....