vue 项目应为是虚拟 dom, 所以打包部署, 如果服务器网速不佳.
载入的时候 会出现一段空白的页面,
体验很不好, 所以这次做项目 添加了一个载入过度页面
具体实现方式如下:
准备工作:
开始只是一个想法, 就是 用过度欢迎动画 替代空白页面.
所以在 index.html 中和 app 平级加入了一段 dom, 样式直接写在 index.html 上
然后在 app.vue mounted 的时候 删除这个 dom
- <div id="app"></div>
- <div class=beforeLoadElement>
- <div>
- <div class=load-header>
- <img src=./static/images/index-logo.png alt="">
- </div>
- <h3 > 欢迎您 </h3>
- <div class=load-content>
- <img src=./static/images/beforeEnterLoad.gif alt="">
- </div>
- <div class=load-text>
- <p > 沟通无忧 畅聊无限 </p>
- <p>CTExcel 最懂您的运营商 </p>
- </div>
- <h4 > 载入中, 请稍后....</h4>
- </div>
- </div>
开发环境发现是可以的, 但是部署到线上, 发现 并没有起作用.
后来 团队讨论, 发现是 CSS 阻塞渲染的问题.
可以理解成: css 未加载完毕的时候, 页面并没有渲染, 所以页面开始还是空白的.
发散思维:
css 加载阻塞页面渲染, 那么就用 js 动态引入 css 文件, js 放在初始 dom 下方
于是在打包出来的 dist 文件夹下的 index.html 进行如下操作
- var _c = document.createElement("link");
- _c.href = "./static/css/app.524cea61ce9a3ab4448773ddf8116522.css";
- _c.type = 'text/css';
- _c.rel = 'stylesheet';
- document.body.append(_c)
这个时候 再次部署到环境, 发现效果是有了, 但是进入页面的时候, 因为 app.css 还没有载入完毕, 所以初始页面 有一段时间 css 样式是没有的.
团队继续发散思维, 那么我们需要在 app.css 完全载入的时候 在关闭掉添加的过度 dom 元素
于是乎加上了一下的 js
- _c.onload = function () {
- document.body.removeChild(document.querySelector(".beforeLoadElement"))
- }
部署测试环境发现, 基本达到了 我们想要的效果, 开始加载 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)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=utf-8>
- <meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
- <title></title>
- <style>
- .beforeLoadElement {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- text-align: center;
- background-color: #fff;
- /* background-color: #ef9469;
- background-image: linear-gradient(to bottom,#ef9469,#df5c31); */
- z-index: 100000;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .beforeLoadElement .load-header img {
- width: 200px;
- }
- .beforeLoadElement h3 {
- font-size: 30px;
- color: #666;
- text-align: center;
- margin: 10px 0 0 0;
- letter-spacing: 10px;
- }
- .beforeLoadElement .load-content {
- margin-top: 10px;
- }
- .beforeLoadElement .load-content img {
- max-width: 80%;
- }
- .beforeLoadElement .load-text {
- margin: 10px 0 0 0;
- }
- .beforeLoadElement .load-text p {
- font-size: 16px;
- color: #666;
- margin: 0;
- line-height: 24px;
- }
- .beforeLoadElement h4 {
- margin: 10px 0 0 0;
- font-size: 12px;
- color: #999;
- font-weight: normal;
- }
- </style>
- </head>
- <body ontouchstart="">
- <div id=app>
- <div class=beforeLoadElement>
- <div>
- <h4 > 载入中, 请稍后....</h4>
- </div>
- </div>
- </div>
- <link rel=stylesheet href=https://unpkg.com/mint-ui@2.2.13/lib/style.min.css>
- <script src=./static/js/viewport.js></script>
- <script src=https://unpkg.com/vue@2.5.16/dist/vue.min.js></script>
- <script src=https://unpkg.com/mint-ui/lib/index.js></script>
- <script src=https://cdn.jsdelivr.net/npm/vue-scrollto></script>
- <script src=https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js></script>
- <script src=https://unpkg.com/vue-lazyload/vue-lazyload.js></script>
- <script type=text/javascript src=./static/js/manifest.90e549128f73c737f60b.js></script>
- <script type=text/javascript src=./static/js/vendor.c49297673feeacc1d38f.js></script>
- <script>
- window.onload = function () {
- window.viewportUnitsBuggyfill.init({
- hacks: window.viewportUnitsBuggyfillHacks
- });
- var _c = document.createElement("link");
- _c.href = "./static/css/app.524cea61ce9a3ab4448773ddf8116522.css";
- _c.type = 'text/css';
- _c.rel = 'stylesheet';
- _c.onload = function () {
- var _app = document.createElement("script");
- _app.type = "text/javascript";
- _app.src = "./static/js/app.0de310714046bf0bfd2e.js";
- document.body.append(_app)
- }
- document.body.append(_c)
- }
- </script>
- </body>
- </html>
部分代码是为了解决手机端 vw vh 适配问题!
来源: http://www.qdfuns.com/article/42435/f83148f316a03afe8c97b52dc20a6164.html