vue单页面利用prerender-spa-plugin实现骨架屏-简化版

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秒以后显示页面