build/webpack.base.conf.js 中引入
var PrerenderSpaPlugin = require('prerender-spa-plugin');
module.exports = {
......
plugins: [
new PrerenderSpaPlugin(
// Absolute path to compiled SPA
path.join(__dirname, '../dist'),
// List of routes to prerender
['/']
)
]
}
view/account/index.vue
<template>
<div id="app">
<!-- 骨架屏 -->
<mainSkeleton v-if="!init"></mainSkeleton>
<!-- 骨架屏 -->
<!-- 页面 -->
<div v-else>
<div class="body">content</div>
</div>
<!-- 页面 -->
</div>
</template>
<script>
import mainSkeleton from './main.skeleton.vue'
export default {
name: 'app',
data () {
return {
init: false
}
},
mounted () {
setTimeout(() => { //延时模拟数据请求
this.init = true
},1000)
},
components: {
mainSkeleton
}
}
</script>
view/account/main.skeleton.vue
<template>
<div class="main-skeleton">
<div class="w_head"></div>
<div class="w_content"></div>
</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style>
.w_head{
width:100%;
height:50px;
margin-bottom: 10px;
background:pink;
}
.w_content{
width:100%;
height: 100px;
background: #ddd;
}
</style>
1秒以后显示页面