Vue 使用 prerender-spa-plugin 添加loading

主要配置代码：

        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: 0;top: 0;right: 0;bottom: 0;background: #fff;z-index: 3000;}#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')

转载于:https://www.cnblogs.com/savokiss/p/9457176.html

Vue 使用 prerender-spa-plugin 添加loading相关推荐

vue如何整个页面添加loading
整个页面添加loading const loading = this.$loading({lock: true,fullscreen: true,text: '启动中',background:'rgb ...
ant design表格添加loading效果
这里看一下ant design中表格添加loading效果. 在页面进来,获取数据时候获取到数据的时候实现方法: 这里只需要在要渲染的表格中添加,loading={XXXX} 即可.大括号里面的值 ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
Angualr 加载速度慢，为页面初始化完成前添加loading
1.在项目根目录下index.html添加loading模板: <div class="loading-box" id="loading">< ...
php spa结合,vue路由嵌套SPA的实现方法
这次给大家带来vue路由嵌套SPA的实现方法,vue路由嵌套SPA实现的注意事项有哪些,下面就是实战案例,一起来看一下. 本文为大家分享了路由嵌套的SPA实现的步骤: A(/a)组件需要嵌套B组件(/ ...
vue 在v-for列表动态添加ref，并获取对应元素
vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...
试用Unity3D体验（三）：添加Loading页面
上一篇[试用Unity3D体验(二):添加一个启动界面] 本次目标上一篇做完启动页面有2个问题, 从启动页面跳转到游戏场景以后,本来应该隐藏的鼠标没有隐藏(同时也担心将来回到启动页面鼠标不出现) 点 ...
vue中可编辑div添加@功能
简介 1.有默认值情况下,光标自动定位到最后 2.按@键,或者@+shift组合键,可添加被@姓名 3.可整体删除@姓名 4.在光标位置插入指定html元素如图所示源码(复制另存txt,修改.ht ...
vue根据条件给标签添加属性
vue根据条件给标签添加属性自己遇到的问题当isReadyonly=='1'时给标签添加disabled属性当isReadyonly=='1'时添加class="form-contro ...
vue跳转页面增加等待_vue-router懒加载时添加loading效果
近期在做一个微信公众号的项目,在页面跳转时发现页面会闪一下,用户体验很不好,而且如果网慢时页面是没有数据的样式会乱很丑.于是乎,就百度看了前人的各种解决方案,个人觉得以下链接中的方案还是很好的,代码简 ...

Vue 使用 prerender-spa-plugin 添加loading

Vue 使用 prerender-spa-plugin 添加loading相关推荐

最新文章

热门文章