前端接入若依后，页面白屏问题排查

最新推荐文章于 2024-03-10 23:56:33 发布
最新推荐文章于 2024-03-10 23:56:33 发布
阅读量411 收藏 1
点赞数
分类专栏： 问题排查 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lj940628/article/details/134990310
版权

白屏问题分析

页面停留一段时间后，通过tab打开其他的页面，界面会白屏或者无法跳转；

  • 白屏的时候控制台无任何报错
  • 无法跳转的时候，控制台会输出错误信息，见截图

跳转报错

1. 无报错白屏问题

通过查找若依的issues找到一个问题点，参考若依的issues地址，其中关键点，看若依官方回复的截图
若依官方回复
通过这个回复，我去排查项目里面的代码，发现很多注释位置不规范，例如这种
不规范代码示例
将项目中这种注释全部移到div内部，保证单节点，页面无报错的白屏情况就解决了

2. 控制台报错的无法跳转情况

这种问题在项目中无法精确定位，因为是非代码问题，直到看到vite生产环境报错，TypeError: Failed to fetch dynamically imported module: xxx

问题推测：用户在发布版本之前已经打开效能管理平台，在版本发布之后，用户跳转有代码更新的页面便会失败

有去证实这个问题，发现确实如此，具体解决办法链接的文档中有解决方案，我并未进行实操，因为暂时不准备去解决这个问题

李不言，
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端之tab切换案例
不小努力的小龙
09-15 702
Tab栏切换 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 我的思路： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&l
小程序白屏问题和内存研究
03-29
在开发小程序应用中，QA发现过几次页面白屏的情况，苦于难易复现和调试，故想对小程序白屏问题进行一番探究。 从小程序官方开发者文档得知，微信小程序运行在三端：iOS（iPhone/iPad）、Android和用于调试的开发者...
关于vue打开某个页面之后，再打开其它页面变空白
wx3601的博客
11-13 309
找了半天之后发现是我把dialog写到了div的外面，导致了template中有了两个子元素Vue的渲染出错导致页面空白。今天写前端的时候突然发现之前写完的页面点进去之后，再点其它的页面会变成空白的。将dialog写到div里面就可以了。
解决：RuoYi点击菜单出现空白页面，无报错
zh94264的博客
01-24 1407
前端使用若依框架(vue3版本)，在开发过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常。出现这种情况一般是在页面停留了几分钟再操作或者短时间多次跳转，偶尔也会莫名奇妙的出现，但就因为同时使用了transition和keep-alive，并在组件内又使用了transition导致的(原理还不了解，可能是缓存了动画的原因，知道的大佬可以解答下)网上看到部分开发者也遇到过这个问题，应该是框架本身的bug，找寻之后发现在。目前本人只了解到以上两种解决方案。
若依项目部署之后页面无法展示，一直在加载的解决办法
最新发布
博客简介
03-10 974
【代码】若依项目部署之后页面无法展示，一直在加载的解决办法。
Effect前端：如何让页面打开速度更快
02-25
页面的打开速度对网站的优化有极大的意义，如果打开一个页面一直处于白屏状态，比如TTFB超过5秒，可能大部分人都会把它关掉。或者是页面加载出来了，但是比较慢，页面显示不完整，标签栏一直在转圈，页面长期处于不可交互的状态，这也是一种很不好的体验。如何评价一个页面打开得快不快，可以用两个指标描述，一个是ready的时间，另一个是load的时间。这个可以从Chrome的控制台看到，如打开stackoverflow.com网站的首页：一共是加载490KB，ready时间是7.36s，load时间是17.35s。再来看下打开谷歌的情况：虽然两个页面的内容差别比较大，但是从时间来看的话，很明显谷歌的速度要明
引入外部js脚本加载慢与页面白屏问题的解决
10-17
最近做的一个项目需要引入一个外部的第三方js脚本。发现加载比较慢，这篇文章主要介绍了引入外部js脚本加载慢与页面白屏问题的解决，感兴趣的小伙伴们可以参考一下
若依切换菜单路由跳转成功，没有调接口页面空白，刷新后正常
tt1234561009的博客
08-16 1894
前端项目若依版本号是 RuoYi-Vue-Plus v5.1.0，在开发过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常了。多次复现出现这种情况一般是在页面停留了几分钟再操作，偶尔也会莫名奇妙的出现，具体什么原因还不明确。在网上找了些资料，看到部分开发者也遇到过这个问题，应该是框架本身的bug，可能是由于在AppMain中用了transition，组件内又使用了transition导致的。删除后就没有再遇到跳转空白的情况了，虽然没有路由过渡动画了，但是保证系统正常使用才是最重要的。
若依v3.2问题解决：菜单路由不匹配 / 跳转路由页面空白
喜大普奔
07-06 1995
结果测试发现是router-view下的＜transition/＞标签添加“out-in“,导航到其他画面为空白。菜单路由不匹配 ，在菜单管理中匹配代码中的相应组件，可是在页面上总是报匹配错误，下面是报错情况和相关数据库。因为店铺管理是一个目录，而店铺详情和店铺列表是菜单，路由规则中目录要有一个菜单匹配，也就是path也相同。若依用router跳转路由时，页面白屏，，虽然比之前少了点效果，但bug解决了。
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
qq_52700250的博客
06-22 7593
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
解决Vue CLI3 项目部署到非根目录下刷新空白问题
xys199719的博客
07-20 2074
一、场景 本地正常的vue项目打包成dist文件，部署到测试环境服务器上，页面空白，无报错也无请求； 部署到服务器上第一页有页面，刷新后页面空白或404； 引入css的type被拦截装换为“text/plain”； 二、原因： 打包到服务器后，资源找不到路径，后台没有正确配置，用户在浏览器直接访问直接空白或404 三、思路： 前端部署路径publicPath是否正确; 前端路由模式是否配置正确； 后端配置是否正确； 四、解决方案： 假设打包后的dist文件内容需要部署到非根目录http.x
若依vue3版本出现白屏的问题
haojiajin的博客
11-24 681
将transition修改为Transition。
微信小程序在安卓的白屏问题原因及改进讲解
08-26
今天小编就为大家分享一篇关于微信小程序在安卓的白屏问题原因及改进讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
vue 动态加载路由刷新页面空白，进入不了router.beforeEach
h498549434的博客
10-29 2252
因为我在挂载el之后检查的路由，把路由放前面就好了 new Vue({ el: ‘#app’, router, store, template: ‘’, components: { App } }) 把上面的放在 router.beforeEach方法后面
解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题
热门推荐
夜郎King的博客
07-05 1万+
本文重点讲解在Ruoyi的单体化版本中，将echarts图表放置到tab中后，界面进行tab切换时，图表无法正常展示的问题，以及如何去解决这些问题。希望本文可以帮助同样在使用Ruoyi单体架构开发Echarts的应用的朋友们来避免这些问题，提供一种解决思路。
ruoyi-vue 点击tab标签不刷新页面，点击菜单刷新页面，
jiufu_的博客
02-04 1140
vue 点击菜单刷新页面 点击tags不刷新页面
解决若依Vue3前后端分离添加动态路由切换菜单页面不显示(空白页面)问题
m0_72837519的博客
07-27 3728
在/layout/components/AppMain.vue找到AppMain.vue文件,添加以下代码即可。今天在做公司新项目时遇到一个问题,在使用若依vue3版本时遇到了添加动态路由页面有时候不显示的问题,在这里添加后,刷新页面也没有显示。最终发现是因为需要给router-view加一个key标志。
RuoYi点击菜单出现空白页面，无报错
qq_46258819的博客
02-22 469
最近在使用若依框架(vue3版本)进行开发的过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常。出现这种情况一般是在页面停留了几分钟再操作或者短时间多次跳转来回切换页面等。通过在网上搜寻资料发现问题是出现在如下图所示的组件中：该组件使用transition加跳转动画，keep-alive用作缓存，可能是由于在AppMain中用了transition，组件内又使用了transition才导致了这个问题。
vue路由跳转后页面白屏
08-20
引用中提到，页面白屏的原因是因为路由无法匹配到正确的路径。当使用next(to.path)强制再次进入路由守卫时，可能会导致死循环，进而导致浏览器无法正常显示页面。 引用中指出，当刷新页面时，控制台会输出错误信息，提示找不到匹配路径的路由。这可能是由于路由配置不正确，或者路由守卫没有正确触发。 引用中提到，在控制台报错时，并没有进入路由守卫的情况。因此，在路由守卫中配置任何内容或重新添加动态路由到session或vuex中都是无效的，因为在进入路由守卫之前就已经出现了错误。 综上所述，vue路由跳转后页面白屏可能是由于路由配置错误，路由守卫未正确触发或者存在其他代码问题导致的。如果遇到这个问题，可以检查路由配置是否正确，确保路由守卫能够正常触发，并检查其他可能导致页面白屏的代码问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！](https://blog.csdn.net/qq_37150410/article/details/128012829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值