vue-cli项目发布新版本,微信缓存了旧版本文件,导致页面白屏

案发小现场
小前端加班加点的终于把当前迭代的东西做好,并且无bug的通过测试,心情美滋滋。非常自信的更新到了生产环境。不到半小时的时间,大领导走到前端部门吼道:“怎么线上页面挂了”。我默默打开手机一看,不是正常么,没有挂啊。事后得知部分用户才会出现白屏问题,什么情况下会复现,我就不得而知了,有知道的小伙伴可以留言相告。

问题描述:vue-cli项目线上发布了新版本后,部分手机微信,出现页面白屏或者点击页面无法交互了。

问题解析:微信缓存了旧版本的文件,导致文件404。

解决方案
ps:之前看过很多方案,全都是瞎扯,什么加文件加版本号、html头部meta加不缓存操作。。。心累!

方案思路:项目监听错误信息,符合条件的错误,则进行跳转(刷新)当前页面。
为了能监听到整个项目,我们应该在index.html 里添加这个监听代码,且放于webpack打包文件的上面,如下:


代码重点概述(敲黑板)
1、添加条件标识,jsLoadedErrorReload,防止重复性跳转页面
2、条件标识存入sessionStorage,每次重新打开公众号页面,都能做到标识jsLoadedErrorReload的初始化
3、用replace的新式跳转了当前页面地址,并且添加上了时间戳。保证跳转后访问的页面,已然是全新的资源

你可能感兴趣的:(前端)