Vue：首屏加载页实现

众所周知vue项目通常首屏加载会非常慢，在浏览器加载资源时，可以在首屏加入一个loading页面。
首先找到在根目录下的 /pulic/index.html：

在 index.html 中找到我们的id为app的div元素：

示例修改如下：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><link rel="icon" href="<%= BASE_URL %>favicon.ico" /><title><%= htmlWebpackPlugin.options.title %></title><style>html,body,#app {height: 100%;margin: 0px;padding: 0px;}body {background-color: #f4f5f5;}.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}</style><!-- loading --><style>#loading {width: 100vw;height: 100vh;background-color: #409eff;display: flex;align-items: center;justify-content: center;}.load_title {font-size: 22px;color: #fff;font-weight: bold;}</style>
</head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't workproperly without JavaScript enabled. Please enable it tocontinue.</strong></noscript><div id="app"><div id="loading"><p class="load_title">正在加载系统资源，请耐心等待...</p></div></div><!-- built files will be auto injected -->
</body>
</html>

这样就实现了一个简单的首屏加载页面：

在资源加载完后，就会转到正式的页面了。
具体的实现原理是Vue加载完项目之前，不会将dom元素放在app这个div内，html渲染出，Vue的资源还在加载，加载完成后会写入app下，从而顶替掉其中的loading页面内容。

可以在网上找一些加载的css动画等，放入加载页中，使页面看起来更美观。

Vue：首屏加载页实现相关推荐

Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP(全称"First Paint" ...
vue首屏加载速度慢_Vue首屏加载速度优化如何提升80%？本文详解
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
VUE 首屏加载时间优化
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
Vue首屏加载速度优化，提升80%以上
在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...
Vue首屏加载速度优化，我用这几个技巧提升80%以上
作者:谁动了我的橘子原文链接:https://juejin.im/post/5edf5b22e51d4578975a7024 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进v ...
Vue首屏加载等待动画
vue实现首屏加载等待动画避免首次加载白屏尴尬的俩种实现方式 1.第一种效果代码 index.html中添加以下代码 <style type="text/css">. ...
Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）
最近在做 Vue 项目的首屏优化,效果不错,在这里将经验分享给大家,总的优化措施是以下四点. 优化方式1:将项目中用到的图片移动到百度云文件存储优化方式2:使用路由懒加载优化方式3:关闭 sour ...
vue首屏加载速度慢_vue项目首屏打开速度慢的解决方法
最近接手了一个后台管理系统,技术栈主要是vue全家桶+elementui,老大打开测试环境页面的时候,说看到首页需要6秒钟,那如何进行优化呢? 首先我们需要安装webpack-bundle-analy ...
浅谈Vue单页应用首屏加载速度优化方案
心语:最不会利用时间的人,最会抱怨时间不够趁着五一放假,刚好最近天气也是不好,.所以抽出一点时间写一点东西,也算是不辜负这个美好的假期吧!小编也祝愿大家五一快乐,玩得愉快哈随着各大前端框架的诞生以 ...

Vue：首屏加载页实现

Vue：首屏加载页实现相关推荐

最新文章

热门文章