Vue 项目发布 添加一个载入过度页面

原创 taoserking 随笔 Vue.js 学习笔记 253阅读 2018-08-10 11:09:02 举报

vue 项目应为是虚拟dom,所以打包部署,如果服务器网速不佳。
载入的时候 会出现一段空白的页面,
体验很不好,所以这次做项目 添加了一个载入过度页面
具体实现方式如下:

准备工作:
开始只是一个想法,就是 用过度欢迎动画 替代空白页面。
所以在index.html中和app 平级加入了一段dom,样式直接写在index.html上
然后在app.vue mounted的时候 删除这个dom

开发环境发现是可以的,但是部署到线上,发现 并没有起作用。
后来 团队讨论,发现是css阻塞渲染的问题。
可以理解成:css未加载完毕的时候,页面并没有渲染,所以页面开始还是空白的。

发散思维:
css加载阻塞页面渲染,那么就用js动态引入css文件,js放在初始dom下方
于是在打包出来的dist文件夹下的index.html 进行如下操作

这个时候 再次部署到环境,发现效果是有了,但是进入页面的时候,因为app.css 还没有载入完毕,所以初始页面 有一段时间css 样式是没有的。

团队继续发散思维,那么我们需要在 app.css 完全载入的时候 在关闭掉添加的过度dom元素
于是乎加上了一下的js

部署测试环境发现,基本达到了 我们想要的效果,开始加载index.html 出现我们想要的过度欢迎动画,然后加载完 进入主页。
但是....又出现问题了,首页中 我们用了vue swiper插件,并且在css中 有修改swiper的样式,因为在app.css 还未加载完成的时候,其实 vue的构造已经完成,所以进入主页的时候 swiper样式 发生了错乱....

这个问题 研究了蛮久,虽然最后解决起来感觉就是一句话的问题
研究过程就不说了
解决方案:

在app.css onload 完成 在动态载入app.js
也就是在css 完全载入后 在构建vue的结构。这样就没问题了
考虑到 vue构建后 会自动清除div#app里面的内容
所以 后来直接把过度动画dom 放在了div#app里面
最后修改完的代码(dst/index.html)

部分代码是为了解决手机端 vw vh适配问题!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复