主要配置代码:

        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. 使用VS2013进行C#程序的单元测试

    没有按照预期的那样做出成功的单元测试,磕磕绊绊参照了下面两篇博客大致做出来了,所以很有必要记录一下过程. http://www.cnblogs.com/duasonir/p/5299732.html( ...

  2. VS2013快速安装教程

    1.下载vs2013安装镜像.VS2013_RTM_ULT_CHS.iso链接: http://pan.baidu.com/s/1mguOdiK密码: rllz  建议使用百度网盘客户端下载,虽然被人 ...

  3. 『编程题全队』Alpha 阶段冲刺博客Day5

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.完成SlotWidget的设计和功能 2.修改了TitleBar上的功能按钮的CSS样式表 孙慧君: 1.登录框的UI设计 2 ...

  4. java词频统计——web版支持

    需求概要: 1.把程序迁移到web平台,通过用户上传TXT的方式接收文件. 2.用户直接输入要统计的文本,服务器返回结果 3.在页面上给出链接 (如果有封皮.作者.字数.页数等信息更佳)或表格,展示经 ...

  5. Docker(五)-Dcoker容器

    简单的说,容器是独立运行的一个或一组应用,以及它们的运行态环境. 如果把镜像看成面向对象中的 类 的话,那么容器就是 类 的实例化 对象. 容器 启动容器 启动容器有两种方式,一种是基于镜像新建一个容 ...

  6. CentOS修改主机名字

    目录 查看hostnmae 修改hostname 远程别名/etc/hosts 查看hostnmae [root@centos ~]$ hostname centos 修改hostname [root ...

  7. 在手机上点击input框时会放大页面

    加上  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-s ...

  8. 用send_keys输入文本的方法

    我们使用app时,输入文字都是调用软键盘.在自动化测试中当然也可以调用软键盘,但是由于输入法设计上的差异,有时候不能达到很好的效果. 例如,搜狗拼音输入法: 选择4-咖啡,然而多打几次,输入法就把“咖 ...

  9. 04.基于IDEA+Spring+Maven搭建测试项目--application-context.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  10. 题解 P5239 【回忆京都】

    你们这些写题解的,就不能把话说清楚嘛!(吐槽1) 你们这些出题的,就不能多出点东方嘛!(吐槽2) 你们这些做题的,就不来写一篇详细一点的题解嘛!(吐槽3) 以上均是个人吐槽,纯属吐槽,不带任何针对性和 ...