主要配置代码:

        new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/introduction', '/application', '/download'],
postProcess: function (context) {
context.html = context.html.replace(
/<\/head>/i,
`<script>
document.addEventListener("DOMContentLoaded", function (event) {
document.getElementById('landing').style.display = 'none';
})
</script>
</head>`
)
return context
}
}),

html

  <div id="landing">
<img id="landing-img" src="/loading-bars.svg" alt="landing">
</div>

css

    #landing {
position: fixed;
left:;
top:;
right:;
bottom:;
background: #fff;
z-index:;
} #landing-img {
position: absolute;
width: 60px;
left: 50%;
top: 40%;
margin-left: -20px;
}

main.js

new Vue({
router,
store,
render: h => h(App),
mounted () {
if (process.env.NODE_ENV !== 'production') {
document.getElementById('landing').style.display = 'none'
}
}
}).$mount('#app')

Vue 使用 prerender-spa-plugin 添加loading的更多相关文章

  1. Vue通过状态为页面切换添加loading、为ajax加载添加loading

    以下方法需要引入vuex,另使用了vux的UI框架,ajax添加loading还引入了axios. 一.为页面切换添加loading. loading.js: import Vue from 'vue ...

  2. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  3. 使用node+vue.js实现SPA应用,nodevue.jsspa应用

    使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...

  4. WPF 客户端浏览器 添加Loading加载进度

    在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...

  5. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  6. vue 点击当前元素添加class 去掉兄弟的class

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. vue不同序号的元素添加不同的样式

    vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...

  8. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  9. 转:extjs 添加loading状态的三种解决办法:

    extjs 添加loading状态的三种解决办法: 方法一: //materialGrid 指需要显示loading状态的控件id var o=Ext.getCmp('materialGrid'); ...

  10. vue 实现todolist,包含添加,删除,统计,清空,隐藏功能

    vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...

随机推荐

  1. PAT甲题题解-1106. Lowest Price in Supply Chain (25)-(dfs计算树的最小层数)

    统计树的最小层数以及位于该层数上的叶子节点个数即可. 代码里建树我用了邻接链表的存储方式——链式前向星,不了解的可以参考,非常好用: http://www.cnblogs.com/chenxiwenr ...

  2. 20181204-2 Final发布

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...

  3. Linux内核分析作业四

    扒开系统调用的三层皮 一.用户态.内核态和中断 一般现代CPU都有几种不同的指令级别 在高级别执行级别下,代码可以执行特权指令,访问任意的物理地址,称之为内核态 在相应的低指令执行级别下,代码的掌控范 ...

  4. Linux内核实验作业六

    实验作业:分析Linux内核创建一个新进程的过程 20135313吴子怡.北京电子科技学院 [第一部分]阅读理解task_struct数据结构 1.进程是计算机中已运行程序的实体.在面向线程设计的系统 ...

  5. Android 7.0+相机、相册、裁剪适配问题

    Android 7.0+相机.相册.裁剪适配问题 在manifest中: <provider android:name="android.support.v4.content.File ...

  6. 【壹拾壹周】final_review

    项目名:俄罗斯方块 组名:新蜂 组长:武志远 组员:宫成荣 杨柳 谢孝淼 李桥 final Review会议 时间:2016.12.3 会议内容 设想和目标 1.在final阶段发布时的预期目标是什么 ...

  7. 【Leetcode】209. Minimum Size Subarray Sum

    Question: Given an array of n positive integers and a positive integer s, find the minimal length of ...

  8. php 中的 “!=”和“!==”

    !==是指绝对不等于,比如,$a = 2, $b=”2″   那么,$a!==$b成立,可是$a!=$b不成立:

  9. developer roadmap

    developer roadmap https://balsamiq.com/ https://balsamiq.com/givingback/free/ https://balsamiq.cloud ...

  10. 2007-10的PWX OracleCdc问题解答

    1. 捕获增量的底层机制是什么?(例如日志.触发器.LogMiner) PWX利用Oracle的LogMiner来提取来自于Oracle的增量, LogMiner是由Oracle数据库提供的,如果当前 ...