vue项目打包后由于html被缓存导致出现白屏如何处理


这篇文章主要讲解了“vue项目打包后由于html被缓存导致出现白屏如何处理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目打包后由于html被缓存导致出现白屏如何处理”吧!vue线上的项目修改打包,重新部署后,线上出现了白屏,无法显示这是因为浏览器缓存了之前的html,用户访问的还是之前的html,但是由于我们重新打包更新了服务器的资源,那么之前的html上引用的资源已经不存在了,所以页面就无法显示出来了。1. 手动刷新。懂的都都懂,用户自己看到屏幕白茫茫一片,肯定以为网络不好,多刷新几次就出来了。2. 在html加上 no-cache 等等 meta标签,然后服务器ngix也加伤 no-cache 等不缓存的代码,网上搜一搜:vue打包缓存白屏,会有好多,这里就不多说了,主要是我加了这些东西后跟没加的效果一样,并不免费云主机域名能解决,还有可能是项目是放在别人的cdn上,改不了服务器,可能也不会起作用。3. 代码刷新。通过测试我们可以看到,当出现白屏时,刷新可以使页面恢复正常,那是刷新时绕过了缓存,有兴趣的朋友可以去了解这方面的知识。所以,我们只需要在资源加载出错的时候让页面重新刷新,那么问题就可以解决了。1. 监听资源加载。在页面加载完成时,使用window自带方法,监听资源加载失败error时,查找失败的资源是否是我们vue项目的资源,只要匹配一个即可通知我们调用刷新页面的方法。汗颜,我是想监听失败的js、css,奈何一直无法监听到,所以放弃了,有成功的朋友可以交流交流。2. 在项目main.js内定义一个全局变量然后我们在index.html内写上监听的方法,此处需注意,如果使用window.onload,那要确保你项目其他地方没有使用这个方法,不然会失效,因为window.onload只能执行一次,多个时只执行最后一个。或者引入jquery,使用jquery的ready方法,该方法可以多次调用,并且执行的时间节点比onload靠前,节省时间先在index.html引入jquery上面使用的是通过在main.js内新增变量去判断,由于我司的页面有很多嵌入app的混合项目,在某个ios内出现了刷新页面时,缓存了之前window的变量,导致判断不准确,所以又想了一个不使用window变量的方法。思路就是在App.vue 内创建一个元素,然后同样在index.html判断页面是否存在这个元素在mounted生命周期里执行这个方法,添加一个元素,我们在index.html内通过id判断这个元素感谢各位的阅读,以上就是“vue项目打包后由于html被缓存导致出现白屏如何处理”的内容了,经过本文的学习后,相信大家对vue项目打包后由于html被缓存导致出现白屏如何处理这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是百云主机,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: MySQL优化index merge引起的死锁怎么解决

本篇内容介绍了“MySQL优化indexmerge引起的死锁怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!生产环境出现死锁流水,通过查看死锁日志,看到造…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 05/25 22:02
Next 05/25 22:02

相关推荐