vue3报错TypeError: Cannot read properties of null (reading 'insertBefore')不是常见3种情况

604 阅读2分钟

踩坑记录:

本地开发无任何报错,但是部署到服务器之后出现报错 TypeError: Cannot read properties of null (reading 'insertBefore') 报错结果和下图相同:由于是打包后的index.js报错,所以无法直接找到具体原因。(由于赶工期没来得及截图,图片来源juejin.cn/post/709599…)

image.png

开发环境:

vue3+element plus+echarts+vite

由于解决方案有点取巧,不是完美解决,所以优先看参考文章

报错情景复现:

el-tabs和el-table以及echarts同时使用,多个tab,在都有echarts图的tab之间切换tab时无报错,但是从无echarts图切到有echarts图的界面时报错。参考了多篇文章,都很典型,大同小异,但是没有一个可以解决我的问题。

最终解决方案:

由于不同于典型的问题,所以在多次刷新页面的过程中发现每个页面初次加载时并没有出现报错,所以直接将tab值携带到路由中,每次切换el-tabs修改路由tab的值,且每次进入页面监听路由tab值,并赋值给el-tabs,即将每一个页面当作首页面重新加载。

缺点:虽然问题解决了,但是由于是直接重新加载页面,所以每一次都会出现刷新效果,tab流畅的切换动态都变成了从第一个tab切到对应的tab,如果一个页面上tab多且其他的请求也很多,就会出现本来和tab无关的地方,也会重新请求,且回切tab的动效也会不符合心意,页面也会重新回到顶部,所以不是实在没法解决的情况尽量还是不要这样做

参考文章(能靠下面这两篇文章解决的,优先用他们的方案)

1.juejin.cn/post/708938… 2.juejin.cn/post/709599…