精华内容
下载资源
问答
  • vue加载首页白屏

    2021-03-19 09:46:00
    解决vue首页白屏问题: 路由改为hash模式 在vue.config.js文件里面加 publicPath:’./’ 我是一个小白 大佬勿喷 还有好的解决方法可以评论 谢谢!

    解决vue首页白屏问题:
    路由改为hash模式
    在vue.config.js文件里面加 publicPath:’./’
    我是一个小白 大佬勿喷 还有好的解决方法可以评论 谢谢!

    展开全文
  • 1、问题描述 本地的vue项目在server端浏览没问题,但是执行npm run build 打包...以上这篇解决vue build打包之后首页白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 前端首页白屏问题

    万次阅读 2018-01-31 11:12:33
    白屏原因 1-在弱网络下(2G网路或者GPRS网络) ,网络延迟,JS加载延迟 ,会阻塞页面 2-客户端存在bug,缓存模块错乱,不缓存js等后来挂起的文件,以及乱缓存index.html 统计白屏数量: 监听某个

    这里写图片描述

    之所以写这篇文章,主要是最近有在面试中经常会被人问道这个方向,作为一个资深前端,这个是必须了解的。但是我技术一般,所以还是需要了解一下,总结一下原因和解决方案。

    白屏原因

    1-在弱网络下(2G网路或者GPRS网络) ,网络延迟,JS加载延迟 ,会阻塞页面

    2-客户端存在bug,缓存模块错乱,不缓存js等后来挂起的文件,以及乱缓存index.html


    统计白屏数量:

    监听某个主DIV的变化(因为是单页面的应用,所以总会有个入口DIV来监听),白屏即是该DIV没有在规定时间内被放入东西,所以只要在规定时间内该DIV没有变化,那就可以进行白屏统计了。


    现象:

    1-首页直出时间过长

    2-依赖js没加载完全

    3-文件依赖关系表map.js加载不正确

    4-接口调用时间过长


    解决方案:

    (1) 如果是基于 Cake[3] 工具开发的,也可以直接用首屏填充伪标签。

    (2) 尽量同步输出,异步输出请尽量 mock 出现在首屏的模板。

    (3) 需要使用nodejs直出了,通过在服务端增加一个nodejs中间层,由nginx将前端的请求转发到nodejs上,nodejs响应请求,加载资源,向底层的cgi进行API请求,之后进行拼接,返回html页面,这样资源跟api的请求时间都在服务端完成,缩短了时间,至于模板之类的,还是能够用到前端。当然nodejs也会有请求资源错误的情况,这个时候就需要返回错误标志给前端,前端再发起原来的异步请求,这种方式相当于一种容灾保障。

    (4)因为是应用方式,所以总是难免存在一些基础依赖,比如modjs,backbone, underscore, jquery等,这种一般都会通过打包成一个js来减少http请求以及文件大小。针对这种情况,只能通过打包模式,加载资源的模式进行改进。强烈按照“首页必须”进行开发,按需加载,其他的资源可以放在二屏,毕竟首页决定着是否还会继续使用。

    (5) 尽量减少文件夹的嵌套,文件名不要过长
    接口调用时间过长也会导致单页面应用的加载时间过长,这种我们主要是前端需要给接口设置timeout

    (6)可订制的客户端,也可以仿照(manifest/appcache,不完善不适合)做一个缓存机制,即是判断服务器版本是否与客户端保存的资源一致,不一致即下载新的,一致即直接使用本地的,这样就变成一个类本地应用了。
    注意:fis的mod.js和map.js的坑

    展开全文
  • 参考:首页白屏优化实践 首页白屏的引发的思考(一) Vue React Angular这三大框架都是JS驱动,单页面的应用的html是靠js生成,首屏需要加载很大的js文件,在JS没有解析加载完成之前页面无法展示,会处于长时间的白屏...

    参考:首页白屏优化实践
    首页白屏的引发的思考(一)

    Vue React Angular这三大框架都是JS驱动,单页面的应用的html是靠js生成,首屏需要加载很大的js文件,在JS没有解析加载完成之前页面无法展示,会处于长时间的白屏。

    以Vue来说,在应用启动时,Vue会对组件中的data和computed中状态值通过Object.defineProperty方法转换成get和set访问属性,以便对数据变化进行监听。而这一过程都是在启动应用时完成的,这也势必导致页面启动阶段比非 JS 驱动(比如 jQuery 应用)的页面要慢一些。

    2020.9.24更
    针对移动端,输入url出现白屏有哪些原因?

    1、webview是什么?

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页

    2、出现首页白屏的原因

    参考:网页白屏具体原因分析

    1. 浏览器兼容

      • vue代码在谷歌中正常使用,但是在ie中显示白屏
      • 原因:是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的
      • 解决方案:(1)npm i babel-polyfill (2)在APP.vue 文件中引入,语句为 import “babel-polyfill”
    2. js封装问题:js如果有问题,页面就不会显示

    3. URL网址无效或含有中文字符(入门级错误)

    4. 缓存导致的白屏:参考:vue构建项目入口文件index.html缓存引发的白屏问题

      • vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况
      • 原因:在用户端会默认缓存index.html入口文件,而由于vue打包生成的css/js都是哈希值,跟上次的文件名都不同,因此会出现找不到css/js的情况,导致白屏的产生。在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。解决方案一般是强制刷新页面或者清除缓存重新加载。
      • (1) 直接在网站后台清除缓存,(2) 在后台无法清理的情况下,我们可以直接删除缓存文件。连接FTP,找到home/cache文件夹,然后进入里面删除cachedata.php
      • FTP(File Transfer Protocol,文件传输协议) 是 TCP/IP 协议组中的协议之一。FTP协议包括两个组成部分,其一为FTP服务器,其二为FTP客户端。其中FTP服务器用来存储文件,用户可以使用FTP客户端通过FTP协议访问位于FTP服务器上的资源。
    展开全文
  • 缓存导致的Vue首页白屏及解决方法缓存导致的Vue首页白屏及解决方法原因解决 缓存导致的Vue首页白屏及解决方法 Vue页面首页白屏原因很多,有浏览器兼容问题,有缓存问题,也有代码问题。这里只说缓存问题。 原因 默认...

    缓存导致的Vue首页白屏及解决方法

    缓存导致的Vue首页白屏及解决方法

    Vue页面首页白屏原因很多,有浏览器兼容问题,有缓存问题,也有代码问题。这里只说缓存问题。

    原因

    默认情况下,浏览器会缓存js、css,html等资源。

    服务器有cache-control设置时,浏览器首先以这个设置为准,能用缓存就使用缓存,这时不会发送http请求。

    服务器没有cache-control设置,一般HTML文件没有缓存设置。浏览器会发送HTTP请求,会带上缓存的etag和最后修改时间,以确认缓存的是最新的文件,服务器返回304或200

    当用户按CTRL加F5强制刷新或首次打开,这就是正常的HTTP请求,也没有缓存可以使用。

    特殊情况

    chrome或edge中,用户设置了”继续浏览上次打开的网页“,这时浏览器会直接使用关闭时的页面,但页面中的资源(js、css、image)会再次请求。

    如果页面关闭期间服务器更新了HTML并删除了旧的资源文件,页面就会白屏。

    解决

    没有好的方法,一种是保留旧的资源不删除,这样会导致资源混乱。

    可以通过nginx禁止缓存index.html

    location ~ /index.html$
    {
        add_header Cache-Control "no-store, no-cache";
    }
    
    展开全文
  • VUE UI 生成项目后打包首页白屏问题 VUE UI 生成项目后打包首页白屏问题 在使用vue ui生成的vue项目中,通常不会生成配置文件config,所以在config里修改index.js的办法行不通。但是vue ui有更简单的解决办法! ...
  • 最近在做项目的优化,除了整体的架构更改,我们发现在每次加载的时候,首页白屏的问题十分明显。 为什么会出现白屏 现在的前端框架, React、Vue、Angular 三大巨头已经占据了主导地位,市面上大多数前端应用也都是...
  • vue 首页白屏优化

    2020-06-02 09:02:04
    方法一 <style> #app { height: 100vh; position: relative; } .im { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; ... &
  • 单页面应用首页白屏时间过长和SEO不友好的问题的一些技术的优缺点和原理概括首页白屏时间过长的原因SEO不友好的原因预渲染技术骨架屏技术总结 概括 随着vue,react等前端框架的出现,单页面应用也随着流行起来。...
  • Vue3.9打包后首页白屏

    2019-07-13 16:02:24
    在开发时运行正常,但是通过vue ui打包build vue工程后出现白屏现象。 白屏原因  按F12后,看控制台,发现静态资源加载路径错误:    踩坑 查询资料,网上都说vue cli 3版本以后,针对这种静态...
  • 当前很多无线页面都使用前端模板进行数据渲染,那么在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这成为白屏问题。 此问题发生的原因基本可以归结为网速跟静态资源 1、css文件加载需要一些时间,在...
  • vue中首页白屏优化

    千次阅读 2020-04-01 17:26:08
    1、路由懒加载,在router.js中修改 2、cdn缓存图片的等 文件 3、vue.config.js中关闭map文件,能减少好多map文件。 经过实测,原来需要12s加载出来的首页,现在只需要2s ...
  • [vue] vue首页白屏是什么问题引起的?如何解决呢? 1.打包后文件引用路径不对,导致找不到文件报错白屏 2.路由模式mode设置影响 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。...
  • 2 在build 过h5后 ,build APP时 ,router-view 默认首页白屏 解决 方法: vue 的router配置上架 mode::'history' ,注释掉 想细:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8...
  • vue build打包之后首页白屏的问题

    万次阅读 2017-12-23 13:43:46
    本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏。有很多js,css无法加载。 1.解决方法 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成下图方框中的样子。 ...
  • 第一种办法 在vue.config.js配置 ...在项目中使用了es6的语法,一些浏览器不支持es6,造成编译错误不能解析而造成白屏 安装 npm install --save-dev babel-preset-es2015 安装 npm install --save-
  • vue 首页白屏是什么问题引起的?如何解决呢? 首先分析原因 VUE首页加载过慢,其原因是因为它是一个单页应用,需要将所有需要的资源都下载到浏览器端并解析。 考虑解决办法 1.使用首屏SSR(服务端渲染,由服务器进行...
  • 生成打包文件路径的问题 creact-react-app项目 umi项目 打包后的index.html <!DOCTYPE html> <html>... content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1
  • vue首页白屏的原因及如何优化

    千次阅读 2019-10-09 12:32:59
    单页面应用的 html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js vendor.js),所以当网速差的时候会产生一定程度的白屏 二、解决办法: (1)优化 webpack 减少模块打包体积,code-split 按需加载 (2)...
  • vue项目打包之后首页白屏的问题

    千次阅读 2019-05-28 12:52:00
    本地的vue项目在server端浏览没问题,但是执行npm run build 打包之后在本地预览是白屏。 解决方法 1.路径问题 在config文件夹中找到index.js打开把assetsPublicPath: '/'改成assetsPublicPath: './' 2.路由...
  • Vue首页白屏优化处理加loading

    千次阅读 2020-06-17 15:59:30
    vue客户端渲染,是在浏览器端通过模板生成html,插入到根节点中 刚打开页面,在js文件加载过程中,和js代码执行过程中,页面中没有显示的内容。 可以在这个时候显示一个loading。用户体验会好些 <!... <...
  • 背景:由于目前线上版本的h5加载一直很慢,于是趁着最近有空就打算优化一下,首先打开network分析影响加载速度的文件有哪些。 看原文件大小有接近1.4m,不能忍!!! 注意: 1、博主这里用的vue-cli2.x版本,...
  • 前端性能优化及首页白屏解决方案

    千次阅读 2020-06-04 22:35:37
    尽可能采用内嵌式即可) 5)、为了避免白屏,可以进来第一件事,快速生成一套loading的渲染树(前端骨架屏),服务器的SSR骨架屏所提高的渲染就是避免了客户端再次单独请求数据,而不是样式 6)JS会阻碍GUI的渲染,先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,549
精华内容 1,819
关键字:

首页白屏