@dykj01/vite

一个集成了常用 Vite 插件的配置包，为 Vue 3 项目提供开箱即用的开发体验。

特性

• 🚀 Vue 3 支持 - 内置 Vue 3 和 JSX 支持
• 📦 自动导入 - 自动导入 Vue API、组件和图标
• 🎨 图标支持 - 集成 Iconify 图标库
• 📊 构建分析 - 内置依赖分析工具
• 🗜️ 代码压缩 - 支持 Gzip 和 Brotli 压缩
• 🔄 热更新通知 - 自动检测版本更新并提示用户刷新
• 🛠️ 开发工具 - 集成 Vue DevTools
• 📋 VXE Table - 支持 VXE Table 懒加载
• 🖼️ SVG 加载 - 内置 SVG 加载器

安装

pnpm add @dykj01/vite
# 或
npm install @dykj01/vite
# 或
yarn add @dykj01/vite

基础使用

在你的 vite.config.ts 中：

import { defineConfig } from 'vite'
import { loadApplicationPlugins } from '@dykj01/vite'

export default defineConfig(async ({ command }) => {
  const isBuild = command === 'build'
  
  return {
    plugins: await loadApplicationPlugins({
      isBuild,
      // 其他配置选项...
    })
  }
})

配置选项

ApplicationPluginOptions

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | isBuild | boolean | - | 是否为构建模式 | | devtools | boolean | false | 是否开启 Vue DevTools | | injectMetadata | boolean | true | 是否注入元数据 | | visualizer | boolean \| PluginVisualizerOptions | false | 是否开启依赖分析 | | webUpdateNotice | boolean | false | 是否开启版本更新通知 | | vxeTableLazyImport | boolean | false | 是否开启 VXE Table 懒加载 | | compress | boolean | false | 是否开启代码压缩 | | compressTypes | ('brotli' \| 'gzip')[] | ['gzip'] | 压缩类型 | | autoImport | boolean | true | 是否开启自动导入 | | autoImportOptions | AutoImportOptions | - | 自动导入配置 | | autoImportComponents | boolean | true | 是否开启组件自动导入 | | autoImportComponentOptions | AutoImportComponentOptions | - | 组件自动导入配置 | | autoImportIcons | boolean | true | 是否开启图标自动导入 | | autoImportIconsOptions | IconsOptions | - | 图标自动导入配置 | | svgLoader | boolean | false | 是否开启 SVG 加载器 | | svgoConfig | Record<string, any> | - | SVGO 配置 |

使用示例

完整配置示例

import { defineConfig } from 'vite'
import { loadApplicationPlugins } from '@dykj01/vite'

export default defineConfig(async ({ command }) => {
  const isBuild = command === 'build'
  
  return {
    plugins: await loadApplicationPlugins({
      isBuild,
      // 开发工具
      devtools: !isBuild,
      
      // 构建优化
      compress: isBuild,
      compressTypes: ['gzip', 'brotli'],
      visualizer: isBuild,
      
      // 更新通知
      webUpdateNotice: isBuild,
      
      // 自动导入
      autoImport: true,
      autoImportComponents: true,
      autoImportIcons: true,
      
      // SVG 支持
      svgLoader: true,
      
      // VXE Table 懒加载
      vxeTableLazyImport: true,
      
      // 自定义配置
      autoImportOptions: {
        imports: ['vue', 'vue-router', '@vueuse/core'],
        dts: true
      },
      
      autoImportComponentOptions: {
        dirs: ['src/components'],
        dts: true
      },
      
      autoImportIconsOptions: {
        autoInstall: true,
        compiler: 'vue3'
      }
    })
  }
})

最小配置

import { defineConfig } from 'vite'
import { loadApplicationPlugins } from '@dykj01/vite'

export default defineConfig(async ({ command }) => {
  return {
    plugins: await loadApplicationPlugins({
      isBuild: command === 'build'
    })
  }
})

开发环境配置

import { defineConfig } from 'vite'
import { loadApplicationPlugins } from '@dykj01/vite'

export default defineConfig(async ({ command }) => {
  const isBuild = command === 'build'
  
  return {
    plugins: await loadApplicationPlugins({
      isBuild,
      devtools: !isBuild, // 仅在开发环境启用
      autoImport: true,
      autoImportComponents: true,
      autoImportIcons: true
    })
  }
})

生产环境配置

import { defineConfig } from 'vite'
import { loadApplicationPlugins } from '@dykj01/vite'

export default defineConfig(async ({ command }) => {
  const isBuild = command === 'build'
  
  return {
    plugins: await loadApplicationPlugins({
      isBuild,
      compress: isBuild, // 仅在生产环境压缩
      compressTypes: ['gzip', 'brotli'],
      visualizer: isBuild, // 仅在生产环境分析
      webUpdateNotice: isBuild // 仅在生产环境启用更新通知
    })
  }
})

内置插件

本包集成了以下 Vite 插件：

• @vitejs/plugin-vue - Vue 3 单文件组件支持
• @vitejs/plugin-vue-jsx - Vue 3 JSX 支持
• vite-plugin-vue-devtools - Vue 开发工具
• unplugin-auto-import - API 自动导入
• unplugin-vue-components - 组件自动导入
• unplugin-icons - 图标自动导入
• vite-plugin-compression - 代码压缩
• vite-svg-loader - SVG 加载器
• rollup-plugin-visualizer - 依赖分析
• @plugin-web-update-notification/vite - 版本更新通知
• vite-plugin-lazy-import - VXE Table 懒加载

类型支持

本包提供完整的 TypeScript 类型定义，你可以在项目中享受完整的类型提示。

import type { ApplicationPluginOptions } from '@dykj01/vite'

const config: ApplicationPluginOptions = {
  isBuild: true,
  // 其他配置...
}

许可证

MIT

作者

dykj01 [email protected]