当前位置：首页 > VUE

vue骨架屏怎么实现

2026-02-21 13:35:26VUE

实现 Vue 骨架屏的方法

使用 CSS 实现基础骨架屏

通过 CSS 定义骨架屏的样式，利用动画效果模拟加载状态。骨架屏通常由灰色矩形块组成，通过渐变动画营造加载感。

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

在 Vue 模板中直接使用骨架屏结构：

<template>
  <div v-if="loading" class="skeleton-container">
    <div class="skeleton" style="height: 100px;"></div>
    <div class="skeleton" style="height: 20px; width: 80%;"></div>
  </div>
  <div v-else>
    <!-- 实际内容 -->
  </div>
</template>

通过插件快速生成

使用 vue-skeleton-webpack-plugin 自动生成骨架屏，该插件会为每个路由生成对应的骨架屏 HTML。

安装插件：

npm install vue-skeleton-webpack-plugin --save-dev

配置 vue.config.js：

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: './src/skeleton.js'
        }
      })
    ]
  }
}

创建骨架屏入口文件 skeleton.js：

import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
  components: { Skeleton },
  template: '<Skeleton />'
});

结合路由实现按需加载

在路由配置中为每个路由指定对应的骨架屏组件：

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    meta: { skeleton: () => import('@/components/SkeletonHome.vue') }
  }
];

在根组件中根据路由状态切换骨架屏：

export default {
  data() {
    return { isLoading: true }
  },
  watch: {
    $route() {
      this.isLoading = true;
      setTimeout(() => this.isLoading = false, 1000);
    }
  }
}

使用预渲染技术

通过 SSR 或 Prerender 提前生成骨架屏 HTML，直接作为首屏内容返回。这种方式能避免客户端渲染时的闪烁问题。

配置示例（需配合服务端渲染）：

// 在服务端入口文件中
import { createRenderer } from 'vue-server-renderer';
const renderer = createRenderer();

app.get('*', (req, res) => {
  const context = { url: req.url };
  const app = new Vue({ /* ... */ });

  renderer.renderToString(app, (err, html) => {
    if (err) res.send(skeletonHtml);
    else res.send(html);
  });
});