Vite Vue 应用插件

自用的 vite vue spa 应用插件

🎯 核心功能

• Vue 3 完整支持 - 单文件组件、JSX、Composition API
• TypeScript 友好 - 自动类型推导和类型检查
• 热重载 - 开发时快速热更新
• 代码分割 - 智能代码分割优化

🛠️ 开发工具

• Vue 代码检查器 - 点击页面元素直接跳转到源码编辑器
• 智能自动导入 - Vue API、Vue Router、Lodash、TanStack Vue Query
• 组件自动导入 - 无需手动 import，支持多种 UI 库
• SVG 支持 - 作为 Vue 组件或 URL 导入
• 可配置导入 - 灵活控制自动导入行为

🎨 样式处理

• Tailwind CSS 4.0 - 最新版本集成
• PostCSS - 现代 CSS 处理

⚡ 构建优化

• 智能压缩 - 生产环境自动移除 debugger
• 传统浏览器支持 - IE10+ 兼容性
• 打包分析 - 可选的体积分析报告
• 版本追踪 - 自动生成构建信息

📦 安装

# npm
npm install vite-vue-app-plugin

# yarn
yarn add vite-vue-app-plugin

# pnpm
pnpm add vite-vue-app-plugin

🚀 快速开始

基本使用

import { defineConfig } from 'vite'
import viteAppPlugin from 'vite-vue-app-plugin'

export default defineConfig({
  plugins: [
    viteAppPlugin({
      componentResolvers: (resolvers) => [
        // 配置组件解析器
        resolvers.AntDesignVueResolver(),
        resolvers.ElementPlusResolver(),
      ],
      disableLegacy: false, // 是否禁用传统浏览器支持
      disableLodash: false, // 是否禁用 Lodash 自动导入
      disableVueQuery: false, // 是否禁用 TanStack Vue Query 自动导入
    })
  ]
})

💡 提示：插件会自动配置 Vue 3、TypeScript、Tailwind CSS 等，开箱即用！

高级配置

import { defineConfig } from 'vite'
import viteAppPlugin from 'vite-vue-app-plugin'
import { AntDesignVueResolver, ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    viteAppPlugin({
      componentResolvers: (resolvers) => [
        // Ant Design Vue 组件自动导入
        resolvers.AntDesignVueResolver({
          importStyle: false, // css in js
        }),
        // Element Plus 组件自动导入
        resolvers.ElementPlusResolver(),
        // 自定义组件解析器
        (componentName) => {
          if (componentName.startsWith('My'))
            return { name: componentName, from: `@/components/${componentName}.vue` }
        }
      ],
      disableLegacy: process.env.NODE_ENV === 'development', // 开发环境禁用传统浏览器支持
      disableLodash: true, // 禁用 Lodash 自动导入
      disableVueQuery: false, // 保持 TanStack Vue Query 自动导入
    })
  ]
})

支持的 UI 库

插件支持以下 UI 库的自动导入：

• Ant Design Vue - resolvers.AntDesignVueResolver()
• Element Plus - resolvers.ElementPlusResolver()
• Naive UI - resolvers.NaiveUiResolver()
• Vuetify - resolvers.VuetifyResolver()
• Quasar - resolvers.QuasarResolver()
• Vant - resolvers.VantResolver()
• TDesign - resolvers.TDesignResolver()
• Arco Design - resolvers.ArcoResolver()
• 更多... 查看 unplugin-vue-components 文档

⚙️ 配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | componentResolvers | Function | - | 组件解析器配置函数，用于自动导入 UI 库组件 | | disableLegacy | boolean | false | 是否禁用传统浏览器支持（IE10+） | | disableLodash | boolean | false | 是否禁用 Lodash 自动导入 | | disableVueQuery | boolean | false | 是否禁用 TanStack Vue Query 自动导入 |

📁 自动生成的文件

插件会在项目根目录自动生成以下文件：

• auto-import-components.d.ts - 组件自动导入类型声明
• auto-import-libs.d.ts - 库自动导入类型声明
• version.json - 构建版本信息

📝 说明：打包体积分析报告默认不生成，如需启用请修改插件源码中的 emitFile 配置。

🔍 开发工具

Vue 代码检查器

• 开发环境下，按住 Ctrl 键点击页面元素
• 自动跳转到对应的源码位置
• 支持 Cursor 编辑器

智能自动导入

• Vue API 中的所有函数无需导入可用
• Vue Router API 中的所有函数无需导入可用
• lodash-es 中的所有函数, 会自动添加 _ 前缀,例如 _debounce, _throttle, _cloneDeep 无需导入可用
• TanStack Vue Query （useQuery, useQueryClient, useMutation）无需导入可用

灵活配置自动导入

如果您的项目不需要某些库的自动导入，可以通过配置禁用：

viteAppPlugin({
  disableLodash: true,    // 禁用 Lodash 自动导入
  disableVueQuery: true,  // 禁用 TanStack Vue Query 自动导入
})

🏗️ 构建优化

生产环境优化

• 智能压缩 - 自动移除 debugger 语句
• 调试友好 - 保留 console 语句用于调试
• 代码压缩 - 使用 Terser 进行代码压缩
• 兼容性 - 生成传统浏览器兼容代码

打包分析

默认情况下不生成打包分析报告。如需启用，可以修改插件源码中的 emitFile 配置为 true，构建完成后会生成 size.html 文件，包含：

• 📊 各模块的打包体积
• 🗜️ Gzip 压缩后体积
• 🗜️ Brotli 压缩后体积
• 📈 依赖关系图

🌐 浏览器支持

• 现代浏览器 - Chrome 88+, Firefox 78+, Safari 14+
• 传统浏览器 - IE 10+（通过 @vitejs/plugin-legacy）