vue项目添加骨架屏vue-skeleton-webpack-plugin，通过app.vue添加骨架屏，解决衔接空白问题

安装插件

yarn add vue-skeleton-webpack-plugin

在 webpack 中引入插件：以4版本为例配置如下 vue.config.js

plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/components/entry-skeleton.js'),
          },
        },
        minimize: true,
        quiet: true
        //初次进入不同的页面时加载不同的骨架屏 skeletonId 是骨架屏组件的id
      //   router: {
      //     mode: 'hash',
      //     routes: [{
      //             path: '/wallet/wallet',
      //             skeletonId: 'skeleton1'
      //         },
      //         {
      //             path: '/wallet/wallet/open',
      //             skeletonId: 'skeleton2'
      //         },
      //     ]
      // }
      })
    ]```

 3. 新增src/components/entry-skeleton.js文件
 

```javascript
import Vue from 'vue'
import Skeleton from './Skeleton'
// import Skeleton1 from './Skeleton1'
// import Skeleton2 from './Skeleton2'
export default new Vue({
  components: {
    Skeleton,
    // Skeleton1,
    // Skeleton2
  },
  template: `
  <div>
      <skeleton/>
  </div>`
  // template: `
  // <div>
  //     <skeleton/>
  //     <skeleton1 id="skeleton1" style="display:none"/>
  //     <skeleton2 id="skeleton2" style="display:none"/>
  // </div>`
})

4.添加src/components/Skeleton.vue文件

<template>
  <div class="skeleton-wrapper">
    <header class="skeleton-header"></header>

    <section class="skeleton-block">
      <img
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg=="
      />
    </section>
  </div>
</template>

<script>
export default {
  name: 'skeleton'
}
</script>

<style scoped>
.skeleton-header {
  margin-top: 200px;
  height: 152px;
  background: grey;
  margin-top: 60px;
  width: 152px;
  margin: 60px auto;
}
.skeleton-block {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
</style>

5.为了减少初次加载显示的骨架屏与页面直接的突然白屏app.vue添加骨架屏

<template>
  <div id="app">
    <skeleton1 class="skeleton"></skeleton1>
    <keep-alive>
      <router-view class="router" v-if="$route.meta.keepAlive" v-transition />
    </keep-alive>
    <router-view class="router" v-if="!$route.meta.keepAlive" v-transition />
  </div>
</template>
<script>
//这个骨架屏组件跟上面的代码要一致才能有无缝衔接的效果
import Skeleton1 from './Skeleton1.vue'
export default {
  components: {
    Skeleton1
  },
 </script>
 <style lang="less">
.router {
  min-height: 100vh;
  background: #f5f7fa;
}
.skeleton{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1
}
</style>

vue项目添加骨架屏vue-skeleton-webpack-plugin，通过app.vue添加骨架屏，解决衔接空白问题

悦读