当前位置：首页 > news >正文

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

news 2025/7/8 13:54:58

安装插件

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"><imgsrc="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>