【异常】记一次前端因资源无法加载导致白屏异常问题

已于 2024-07-23 13:40:56 修改
阅读量1.8k 收藏 4
点赞数 3
分类专栏： 007 - 大前端技术 文章标签： 前端 javascript 前端框架 vue.js webpack
于 2023-01-10 22:36:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wstever/article/details/128619085
版权
本文记录了一次前端项目因资源加载失败导致的白屏问题的排查与修复过程。主要涉及webpack配置错误，包括output的chunkFilename问题、环境变量VUE_APP_CONTEXT_PATH的使用、Nginx配置检查、axios请求前缀设置等，最终通过修改webpack配置、本地build测试和代码逻辑调整成功解决了问题。
摘要由CSDN通过智能技术生成

一、背景

自从运维同事强烈要求前端的环境要使用多套的，参考文章
【项目】参考若依的前端框架去多环境
于是一番捣鼓与改造之后，看似已经顺利了
在这里插入图片描述
但运维说，前端还是有问题，需要他帮我改下，于是改了如下内容
在这里插入图片描述
什么嘛，为啥要帮我加上web？然后说还剩下最后一个问题，留给我慢慢改（自行解决）。
内心崩溃，为啥不一起改了呢？？于是让我们来分析到底问题出在了哪里？？？

二、异常截图

2.1 页面：沙箱环境的前端页面显示了白屏

了解本专栏 订阅专栏 解锁全文 超级会员免费看
本本本添哥
关注
专栏目录
订阅专栏
前端 JS 异常那些事
Geek技术前线
05-03 1056
人无完人，所以代码总会出异常的，异常并不可怕，关键是怎么处理
解决前端每次发版白屏问题的新思路（修改webpack保存上一次发版文件）
林钹渊的博客
12-04 2133
在使用vue-cli脚手架构建完项目，项目完成后，需打包上线。默认打包方式则是 npm build，然后项目根目录会生成 dist 文件夹。服务端将该文件夹替换线上即可。但是当第n（n>1）次上线后，由于在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。虽然刷新一...
前端白屏出现的原因及一些解决方式
weixin_53058401的博客
11-27 1万+
前端白屏出现的原因及一些解决方式
前端如何解决白屏问题
lihui61357457的博客
10-15 6453
【代码】前端如何解决白屏问题。
React项目发版后部分用户出现白屏现象
weixin_42947716的博客
06-30 2690
系统每次发版之后，会有少部分用户出现的情况，需要清除浏览器缓存，开无痕浏览或者重新加载才能正常访问
vue 首页加载，速度优化及解决首页白屏问题
王春燕的博客
06-15 3626
一、Spa单页面的加载过程 二、首页加载慢的原因 三、加载速度慢解决方案 1、分离打包第三方资源包 2、第三方库使用CDN引入 3、vue-router路由懒加载 4、静态资源压缩，代码压缩，图片压缩 5、不要滥用三方库 6、去掉编译中的map文件 7、代码层面的优化 四、解决白屏，体验优化...
【性能优化】作为一名前端工程师，网页白屏了该怎么做
qq_53512708的博客
03-01 936
上周面试被问到这个问题，磕磕绊绊地答了一点，写个博客记录一下解决的主要思路。
前端性能与异常上报
01-27
异常捕获是前端开发中的另一个核心任务。主要有以下两种类型： 1. 接口调用情况：当API请求出现问题时，需要捕获并上报错误信息，包括用户操作系统、浏览器版本、请求参数等，以便于定位问题原因。 2. 页面逻辑错误...
前端异常监控、性能监控
微光·火炬
06-25 970
出发点： 采集用户行为数据 获取用户行为以及跟踪产品在用户端的使用情况。数据分析用户行为，进行产品的功能设计。 数据监控 数据监控，顾名思义就是监听用户的行为。也可为异常监控提供触发行为记录。常见的数据监控包括： PV: 即页面浏览量或点击量。 UV:指访问某个站点或点击某条新闻的不同IP地址的人数 用户在每一个页面的停留时间 用户通过什么入口来访问该网页 用户在相应的页面中触发的行为 用户机型 统计这些数据，了解用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面
引入外部js脚本加载慢与页面白屏问题
weixin_34342992的博客
12-09 644
问题背景 最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本，所以体积比较大，大概有2M，加载完成也得要个好几秒，网速慢的时候十几秒都有可能。 之前也遇到脚本加载慢的问题，但是没这么慢，所以这次就特别写个文章记录一下我的解决过程。 首先上两张项目已完成的截图。 下图是通过第三方脚本渲染出来的3D建筑页面 下图是首页，不需要用到第三方脚本 遇到的问题和需求 引入...
前端首屏白屏怎么解决
最新发布
娃娃鱼的博客
05-01 604
确保前端代码经过优化和压缩，以减小文件大小，加快加载速度。对于首屏必要的关键资源（如CSS、JavaScript、图片等），可以通过预加载技术在页面加载过程中提前加载，以加快首屏渲染速度。使用服务器端渲染（SSR）技术生成首屏内容，将渲染工作放在服务器端完成，减少客户端的渲染压力和等待时间，从而快速展示首屏内容。将页面分为多个模块，并使用懒加载技术或按需加载方式，只在需要时加载相应的模块，减少首屏所需加载的资源量和时间。减少页面重定向和不必要的请求次数，确保页面加载过程中的请求尽可能减少，以提高加载速度。
vue 项目首页加载速度优化以及解决首页白屏问题
热门推荐
郝峰vip的博客
12-14 1万+
Vue项目优化首页加载速度达到秒开以及解决首页白屏问题
前端性能优化——页面加载白屏时间长的原因有什么，页面白屏如何优化？
qq_42445025的博客
06-25 1439
浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。
前端发版上线出现白屏问题
aDiaoYa_的博客
03-26 2043
出现上线白屏的问题有很多，如：配置错误、缓存问题、浏览器兼容问题，根据不同情况去解决。
网站优化都有哪些方法 网站优化技巧？
whenzhenwen的博客
09-11 265
优化网站入门很简单，也有很多人认为只要每天更新内容，网站优化效果就一定会有，如果真的优化网站这么简单，那为什么现在很多站长，还是在抱怨优化做不好呢？这其实就是没有学会网站优化技巧！ 优化运营网站的小技巧： 1、挑选关键词 要确定网站优化方向，最开始之前就要筛选关键词，网站关键词筛选不要新站点上线，就选行业热门关键词，行业热门关键词优化难度大，需要很长优化周期时间，可能一个行业核心关键词，一个新网站优化两年到三年，最终关键词排名还是没有！ 新站点需要考虑的是能够快速上首页，核心关键词反而不适合，在前期
如何处理首页白屏，首页加载慢的情况
weixin_45724850的博客
07-15 1362
首页白屏和加载慢是常见的性能问题，以下是几种可以处理首页白屏和加载慢情况的方法：代码优化：检查代码并进行优化，例如。确保你的代码尽可能地高效和精简。
vue白屏优化（defer）
2303_76218115的博客
03-13 2063
说到VUE项目优化，老生常谈的一个话题，就是首页白屏问题，当然造成白屏的原因有很多，我们要根据不同的情况灵活的进行处理，在这呢我单单指出其中一种使用场景，以及其中一种优化手段，这种优化手段比较冷门，相信很多同学都不一定知道，但是超级好用！！！这种经典的优化方案，只是vue优化里的冰山一角，希望大家一起学习，共同进步。
解决项目加载时空白页面
你走过的路 风都是暖的
08-02 466
背景：当前端项目加载时，遇到网络不稳定或更新项目时，出险长时间白屏情况，对用户访问非常不友好。index.html页面 （public文件夹下）效果图 loading动画覆盖白屏。App.vue 添加钩子函数。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

本本本添哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值