首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

qiankun vue 子应用页面刷新白屏

前言项目使用微前端框架 qiankun, 主应用通过登录的用户权限控制显示子应用以及对应菜单页面,以及页面中的按钮等项目版本由于不同的库版本遇到的问题可能不一致,这里记录一下相关版本node: v16.13.0npm...: 8.1.0vue: 2.6.11qiankun: 2.7.0实际开发场景中遇到的白屏问题日常开发中,先启动主应用,然后再启动子应用,在主应用中登录后,访问 qiankun 中挂载的子应用页面在 qiankun...主应用中访问自应用,页面刷新数据正常加载,由于主应用中的服务由于运维环境变化,出现主应用后端服务连续几天运行不正常,导致登录后的页面会自动退出到登录页,再次登录无法登录的情况,子应用的项目开发页面进不去了由于项目开发进度比较赶...所以前端开发人员通过只访问子应用的方式先开发一些纯前端的静态页等内容,发现子应用的热更新效果异常,修改的子应用样式等代码无法实时预览,只能通过先访问 http://localhost:9530/ 主页刷新后,然后再通过页面的路由跳转按钮手动跳转到对应的功能页面才行功能页面修改代码后通过刷新浏览器发现页面直接白屏了...vue.config.js 中的 publicPath 配置, 现在把项目根目录下 vue.config.js 中修改 publicPath 的值,把 ./ 修改成 / 默认值, 重新启动项目,这时候页面刷新和热更新功能也都正常了

4.4K10

代码刚上线,页面白屏

简单来说,白屏就是用户打开前端页面什么有没有。 这是一个很重要的质量指标。 那么我们如何监控页面白屏异常呢?...白屏异常检测主要分为两个部分,一个是如何检测,一个是什么时候检测, 检测方案 首先明确一点,页面打开慢,白屏时间长,不等于白屏页面就是白色图,不等于白屏。...关键节点是否渲染 在当前SPA页面都是挂在根节点之下,通过查看关键dom是否渲染,如查看dom的高度heigt属性是否存在,如果存在,则证明关键dom已经渲染,页面不是白屏,反之,则判断页面白屏 实现思路...这可能导致误判,将页面错误地视为白屏。...'); } 优点 快速确定白屏状态:通过采样点的方式,可以快速检查页面中是否存在白屏状态,而无需遍历整个页面

30910
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    React Native Android启动屏,启动白屏,闪现白屏

    React Native Android启动屏,启动白屏,闪现白屏 尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 本文出自《React Native...这期间由于js bundle还没有完成装载并渲染,所以界面显示的是白屏白屏给人的感觉很不友好,那有没有办法不显示白屏呢? 上文解释了:为什么React Native应用会在启动的时候显示一会白屏。...下面我就教大家如何给React Native Android加启动屏,并解决启动白屏的问题。...修改主题解决闪现白屏/黑屏 问题描述: 市场上有很多应用,在启动的时候,会出现闪现黑屏或白屏,有的应用却没有。究其原因,是主题在搞鬼。...因为启动Activity也是需要时间的,这之间的时间间隔,便是闪现白屏或黑屏的时间。 解决方案 为解决启动时闪现白屏或黑屏的问题,我们可以从主题下手,为应用创建一个透明的主题。

    2.2K90

    WKWebView 白屏问题

    webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0)); 当 WKWebView 总体内存占用过大,页面即将白屏的时候...在一些高内存消耗的页面可能会频繁刷新当前页面,H5侧也要做相应的适配操作。...B、检测 webView.title 是否为空 并不是所有H5页面白屏的时候都会调用上面的回调函数,比如,最近遇到在一个高内存消耗的H5页面上 present 系统相机,拍照完毕后返回原来页面的时候出现白屏现象...在WKWebView白屏的时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear 的时候检测 webView.title 是否为空来 reload 页面...综合以上两种方法可以解决绝大多数的白屏问题。 参考链接:腾讯Bugly

    4.4K20

    PHP压缩html页面

    将html页面压缩之后,可以大大提升页面的加载速度,下面的压缩代码去掉了页面中的所有空格、注释、制表符、换行符等等比较多余的字符,下面的代码是写以在thinkphp5中为例的,不过在他PHP程序是通用的...1、找到thinkphp5框架中的框架View类(/think/library/response/View.php),修改类中的output方法,代码如下:     /**      * 处理数据      ...,下面这段代码对PHP通用,可以进行自定义扩展封装          * 如果要使用压缩,请将IS_PAGE_ZIP定义在公共加载的文件中          * */         if(defined...php echo ', $outputHtml)));         }                  return $outputHtml;     } 2、在页面公共部分或者你需要使用页面压缩的模块设置一个宏变量进行标记...,我的如下     //设置开启页面压缩,true为开启页面压缩,false相反     define('IS_PAGE_ZIP', false); 3、最后压缩后的效果如下图:

    8.1K10

    vue白屏优化方案

    问题   vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况。那么该问题产生原因是什么呢?我们又该如何应对呢?...但是当第n(n>1)次上线后,由于在用户端会默认缓存index.html入口文件,而由于vue打包生成的css/js都是哈希值,跟上次的文件名都不同,因此会出现找不到css/js的情况,导致白屏的产生。...那么在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。解决方案一般是强制刷新页面或者清除缓存重新加载。...方案对比 方案 操作难度 优缺点 1 html文件简单修改 基本上没用 2 webpack配置简单修改 跟hash值文件名一个性质,不解决痛点 3 服务端加配置,简单 解决部分缓存问题,不解决全部;白屏问题依旧存在

    3.2K20

    如何实现前端白屏监控?

    背景 不知从什么时候开始,前端白屏问题成为一个非常普遍的话题,'白屏' 甚至成为了前端 bug 的代名词:_喂,你的页面白了。...三、饿了么-Emonitor 白屏监控方案 饿了么的白屏监控方案,其原理是记录页面打开 4s 前后 html 长度变化,并将数据上传到饿了么自研的时序数据库。...如果一个页面是稳定的,那么页面长度变化的分布应该呈现「幂次分布」曲线的形态,p10、p20 (排在文档前 10%、20%)等数据线应该是平稳的,在一定的区间内波动,如果页面出现异常,那么曲线一定会出现掉底的情况...错误边界可以包在任何位置并提供降级 UI,也就是说,一旦开发者'有责任心' 页面就不会全白,这也是我之前说的方案一与之天然冲突且其他方案不稳定的情况。...100% 这个词或许不够负责,接下来我们来看看为什么我说这一推导是 100% 准确的: React 渲染流程 我们来简单回顾下从代码到展现页面上 React 做了什么。

    1.7K20

    PHP与Web页面交互

    PHP提供了两种与Web页面交互的方法: 通过Web表单提交数据; 通过URL参数传递数据; POST请求方法不依赖于URL,不会将参数值显示到地址栏中。...分割URL和传输数据,同时在多个参数之间用“&”连接,安全性很低;通常用于获取信息 PHP提供了连个全局变量,即_POST[]和_GET[],分别获取POST和GET请求方法的参数值 表单要设置属性:...upload_max_filesize = 2M,设置上传文件的最大值,默认值为2M max_file_uploads =2 0,设置一次请求可以上传的最大文件数量 HTML表单有个特殊的标签元素为“”,用来实现页面文件上传的功能...Coolie通常用以下3个方面: 记录用户的信息,如上次登陆的用户名 页面之间传递参数 将HTML页存储在Cookie中,提高浏览速度 Cookie存储在用户端 创建Cookie setcookie(nme...php setcookie("location","",time()+1); ?

    3.9K30

    P003PHP之用户页面注册信息填写页面

    php用户注册页面填写信息完整实例,内容包括邮箱自动匹配、密码强度验证以及防止表单重复等. 0.预览 下面三张图,第一张是注册的展示页面,第二张思维导图就一个简单的逻辑,第三张是通过firebug查看调用的...让按钮存在于页面上,暗示用户还有操作没完成,这里其实倒是可以再加些小提示,明确哪里没有做好,我偷懒了下没有做那种提示。...服务条款下面我用虚线标识了一下,并且在移上去的时候显示手的图标,暗示用户这里可以点击,点击服务条款弹出一个内容层,里面是协议内容,我没有做打开一张新页面那种提醒方式,我觉得这种时候用户的注意力应该集中在当前页面...我想做到的一个目标是,当用户进入到这个页面后,能非常轻松的完成各个输入框,非常舒服流畅的完成各个框。...附源码下载地址:php用户注册页面填写信息完整实例 以上就是本文的全部内容,希望对大家的学习有所帮助。 感谢这位仁兄的文章。 参考链接 超详细的php用户注册页面填写信息完整实例

    2K30

    前端性能优化之白屏时间

    前言 该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念、重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践。...一、概念 白屏时间:即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间。 白屏时间的长短将直接影响用户对该网站的第一印象。...二、白屏时间的重要性 当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。...三、白屏是一个怎样的过程呢? 让我们一起来揭秘:从打开一个页面,到页面的画面展示经历了怎样的过程! 1. DNS Lookup DNS Lookup 即浏览器从DNS服务器中进行域名查询。...四、白屏-性能优化 至此,我们已经了解了从浏览器在打开一个链接开始,到屏幕展示的过程-白屏时间的历程,那这对每个环节中发生的事情,我们可以有针对性的进行相关的优化。 1.

    15K30
    领券