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

最新推荐文章于 2025-07-01 19:47:59 发布

原创最新推荐文章于 2025-07-01 19:47:59 发布 · 851 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中使用prerender-spa-plugin进行预渲染，并结合骨架屏提升用户体验。通过webpack配置和Vue组件展示页面加载过程中的占位效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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