前端--导致页面白屏的原因

  1. JS问题
    常用框架Vue React Angular都是依靠JS进行驱动, 并且单页面的应用html也是依靠JS生成,在渲染页面的时候需要加载很大的JS文件,在JS解析加载完成之前无法展示页面,从而导致了白屏。

  2. 浏览器兼容问题
    vue代码在ie中显示白屏

  3. URL 网址无效或者含有中文字符

  4. 缓存导致
    vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况

原因:在用户端会默认缓存index.html入口文件,而由于vue打包生成的css/js都是哈希值,跟上次的文件名都不同,因此会出现找不到css/js的情况,导致白屏的产生。在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。

解决方案一般是强制刷新页面或者清除缓存重新加载。
(1) 直接在网站后台清除缓存,(2) 在后台无法清理的情况下,我们可以直接删除缓存文件。连接FTP,找到home/cache文件夹,然后进入里面删除cachedata.php

参考网站:
https://blog.csdn.net/yeyinfan123/article/details/107206247/?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1.essearch_pc_relevant&spm=1001.2101.3001.4242

https://mayouchen.blog.csdn.net/article/details/79214773?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.essearch_pc_relevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.essearch_pc_relevant

https://blog.csdn.net/weixin_43912756/article/details/108354495?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值