JS 中怎么用 Vite 插件实现页面骨架屏或自动导入-js教程-PHP中文网

vite插件实现骨架屏的核心是在构建阶段或运行时按需注入匹配页面结构的骨架dom，而非自动导入组件；主流分构建时静态注入和运行时动态挂载两类，受限于平台兼容性、ssr对齐及样式隔离等问题无法全自动。

js 中怎么用 vite 插件实现页面骨架屏或自动导入

在 JS（更准确说是基于 Vite 的 Vue/React 项目）中，用插件实现骨架屏，核心思路不是“自动导入组件”，而是在构建阶段或运行时，按需注入与目标页面结构匹配的骨架占位 DOM。Vite 插件本身不直接“自动导入骨架组件”，而是通过拦截 HTML、分析路由、注入脚本或预生成结构来达成效果。

一、Vite 插件实现骨架屏的典型路径

主流方案分两类，适配不同技术栈和平台能力：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

构建时静态注入：插件扫描 src/pages 或路由配置，在构建阶段为每个页面生成对应的骨架 HTML 片段，注入到该页面的 <div id="app"> 内，再配合 CSS 控制显隐。适合 H5 场景，依赖 AST 解析（如 <code>@vue/compiler-sfc）或文件约定（如 PageName.skeleton.vue）。
运行时动态挂载：插件注入一个轻量全局脚本（如 skeleton-loader.js），在 router.beforeEach 或组件 onBeforeMount 阶段，根据当前路由匹配预定义的骨架组件（如 SkeletonHome、SkeletonUser），动态 createApp 并挂载到指定容器。Vue3 + Pinia 项目常用此方式，控制粒度高、可响应数据状态。

二、实际可用的插件与关键配置

目前没有官方 Vite 插件统一支持所有场景，但以下组合已在生产项目验证可行：

vite-plugin-skeleton（社区维护）：支持 Vue2/Vue3，需手动为每个路由配置骨架组件路径，插件负责在 HTML 中插入初始化脚本和占位节点。配置示例：

import { defineConfig } from 'vite'<br>
  import vue from '@vitejs/plugin-vue'<br>
  import skeleton from 'vite-plugin-skeleton'<br>
  export default defineConfig({<br>
    plugins: [<br>
      vue(),<br>
      skeleton({<br>
        routes: [<br>
          { path: '/', skeleton: '@/skeletons/HomeSkeleton.vue' },<br>
          { path: '/user', skeleton: '@/skeletons/UserSkeleton.vue' }<br>
        ]<br>
      })<br>
    ]<br>
  })

手写简易插件：仅需几十行代码即可完成基础注入。例如监听 transformIndexHtml 钩子，在底部插入骨架容器和初始化逻辑：

export default function vitePluginCustomSkeleton() {<br>
    return {<br>
      name: 'vite-plugin-custom-skeleton',<br>
      transformIndexHtml(html) {<br>
        return html.replace(

, `<br>
          <div id="skeleton-root" style="display:none"></div><br>
          <script type="module"><br>
            import { createApp } from 'vue'<br>
            import Skeleton from './src/skeletons/Default.vue'<br>
            createApp(Skeleton).mount('#skeleton-root')<br>
          </script>