vite 默认不支持首屏骨架屏自动注入，需通过插件（如 vite-plugin-skeleton）在构建时的 transformindexhtml 钩子中将骨架 html 注入 html 模板，再配合框架逻辑在应用挂载前后控制显隐，并按路由动态匹配不同骨架，注意样式内联、体积精简及 ssr 场景适配。
Vite 本身不提供首屏骨架屏自动注入功能，需要结合构建时插件或运行时逻辑手动实现。核心思路是：在 HTML 模板中预留骨架占位符（如 <div id="skeleton"></div>），构建阶段通过插件动态注入骨架 HTML 或 CSS，并在应用挂载前显示、挂载后隐藏。
使用 Vite 插件在构建时注入骨架 HTML
推荐使用社区插件 vite-plugin-skeleton（维护较活跃）或自定义插件。它会在 Vite 的 transformIndexHtml 钩子中将指定的骨架文件内容插入到生成的 HTML 中。
- 安装插件：
npm install vite-plugin-skeleton --save-dev - 在
vite.config.ts中配置：import { defineConfig } from 'vite'<br>import skeleton from 'vite-plugin-skeleton'export default defineConfig({<br> plugins: [<br> skeleton({<br> // 指向骨架组件的 HTML 文件路径（支持 .html 或 .vue 编译为 HTML）<br> root: 'src/skeletons/home.html',<br> // 匹配路由，只对 / 生效<br> matchers: ['/', '/home'],<br> // 注入位置，默认插入到 开头<br> injection: 'body-prepend'<br> })<br> ]<br>) - 创建
src/skeletons/home.html，写纯静态骨架结构（避免 JS、仅用内联 style 或 class）：<div class="skeleton-wrapper"> <br><div class="skeleton-header"></div> <br><div class="skeleton-content"></div> <br> </div><br><style>.skeleton-wrapper { padding: 16px; } .skeleton-header { height: 40px; background: #eee; border-radius: 4px; }</style>
配合前端框架控制显隐（以 Vue 为例）
骨架屏不能一直显示，需在应用初始化完成、真实内容渲染后及时移除。Vue 应用通常在 main.ts 中挂载，可在此处添加显隐逻辑。
- 在
main.ts挂载前显示骨架（默认已注入，只需确保可见）： - 挂载成功后，延迟一小段时间（或监听
app.mounted）隐藏骨架并清理 DOM： - 示例代码：
import { createApp } from 'vue'<br>import App from './App.vue'<br><br>const app = createApp(App)<br><br>// 确保骨架可见<br>const skeleton = document.getElementById('skeleton')<br>if (skeleton) skeleton.style.display = 'block'<br><br>app.mount('#app')<br><br>// 挂载后隐藏骨架（可加 transition 或简单 display:none）<br>setTimeout(() => {<br> if (skeleton) skeleton.style.display = 'none'<br>}, 300)
进阶：按路由动态加载不同骨架
单页应用中不同页面结构差异大，应为关键路由（如首页、商品列表、详情页）分别设计骨架。可通过插件的 matchers 选项或自定义逻辑实现。
- 插件配置多个规则（
vite-plugin-skeleton@2.x+支持）： -
skeleton([<br> {<br> root: 'src/skeletons/home.html',<br> matchers: ['/', '/home']<br> },<br> {<br> root: 'src/skeletons/product.html',<br> matchers: ['/product/:id']<br> }<br>]) - 注意：路由匹配基于生成的 HTML 文件名（如
index.html对应/），若使用 SSR 或多入口，需配合build.rollupOptions.input控制输出结构。
注意事项与优化建议
骨架屏效果依赖注入时机和样式隔离，容易踩坑。
-
样式必须内联或全局生效：构建时注入的骨架 HTML 不走 Vue/React 的 CSS Scoped 或模块化流程，避免使用
<style scoped></style>，推荐用 BEM 类名 + 内联 style 或单独引入骨架 CSS。 - 避免阻塞渲染：骨架 HTML 应轻量（无图片、无外部请求），体积控制在 1–2KB 内；不要在骨架中写 JS 脚本。
- 服务端场景慎用：若开启 SSR（如 Vite + Vue Server Renderer），骨架注入需在服务端完成，客户端插件无效，应改用服务端模板逻辑注入。
- 验证是否生效：打开浏览器开发者工具 → Network → 禁用缓存 → 刷新，查看 HTML 响应体中是否包含你写的骨架代码。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
