博客站

Vite 的插件生态系统非常丰富，以下是一些常用的 Vite 插件及其用途：

1. @vitejs/plugin-vue

• 用途：支持 Vue 3 单文件组件（SFC）。
• 安装：

  npm install @vitejs/plugin-vue --save-dev
  

• 配置：

  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
  });
  

2. @vitejs/plugin-react

• 用途：支持 React 项目，包括 Fast Refresh。
• 安装：

  npm install @vitejs/plugin-react --save-dev
  

• 配置：

  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
  });
  

3. @vitejs/plugin-legacy

• 用途：为旧版浏览器生成兼容的代码。
• 安装：

  npm install @vitejs/plugin-legacy --save-dev
  

• 配置：

  import legacy from '@vitejs/plugin-legacy';
  
  export default defineConfig({
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11'],
      }),
    ],
  });
  

4. vite-plugin-pwa

• 用途：为项目添加 Progressive Web App (PWA) 支持。
• 安装：

  npm install vite-plugin-pwa --save-dev
  

• 配置：

  import { VitePWA } from 'vite-plugin-pwa';
  
  export default defineConfig({
    plugins: [
      VitePWA({
        registerType: 'autoUpdate',
        manifest: {
          name: 'My PWA App',
          short_name: 'PWA',
          description: 'My awesome PWA app',
          theme_color: '#ffffff',
        },
      }),
    ],
  });
  

5. vite-plugin-html

• 用途：增强 HTML 文件的处理，例如注入变量或压缩 HTML。
• 安装：

  npm install vite-plugin-html --save-dev
  

• 配置：

  import { createHtmlPlugin } from 'vite-plugin-html';
  
  export default defineConfig({
    plugins: [
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            title: 'My App',
          },
        },
      }),
    ],
  });
  

6. vite-plugin-svg-icons

• 用途：将 SVG 图标作为 Vue 组件使用。
• 安装：

  npm install vite-plugin-svg-icons --save-dev
  

• 配置：

  import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
  import path from 'path';
  
  export default defineConfig({
    plugins: [
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  });
  

7. vite-plugin-compression

• 用途：压缩构建输出的文件（如 Gzip 或 Brotli）。
• 安装：

  npm install vite-plugin-compression --save-dev
  

• 配置：

  import viteCompression from 'vite-plugin-compression';
  
  export default defineConfig({
    plugins: [
      viteCompression({
        algorithm: 'gzip',
      }),
    ],
  });
  

8. vite-plugin-style-import

• 用途：按需引入组件库的样式。
• 安装：

  npm install vite-plugin-style-import --save-dev
  

• 配置：

  import styleImport from 'vite-plugin-style-import';
  
  export default defineConfig({
    plugins: [
      styleImport({
        libs: [
          {
            libraryName: 'element-plus',
            esModule: true,
            ensureStyleFile: true,
            resolveStyle: (name) => {
              return `element-plus/lib/theme-chalk/${name}.css`;
            },
            resolveComponent: (name) => {
              return `element-plus/lib/${name}`;
            },
          },
        ],
      }),
    ],
  });
  

9. vite-plugin-mock

• 用途：提供本地 mock 数据支持。
• 安装：

  npm install vite-plugin-mock --save-dev
  

• 配置：

  import { viteMockServe } from 'vite-plugin-mock';
  
  export default defineConfig({
    plugins: [
      viteMockServe({
        mockPath: 'mock',
        enable: true,
      }),
    ],
  });
  

10. vite-plugin-inspect

• 用途：检查 Vite 插件的中间状态和转换结果。
• 安装：

  npm install vite-plugin-inspect --save-dev
  

• 配置：

  import inspect from 'vite-plugin-inspect';
  
  export default defineConfig({
    plugins: [inspect()],
  });
  

总结

这些常用的 Vite 插件可以帮助开发者增强项目的功能，提升开发体验和构建性能。根据项目需求选择合适的插件，可以显著提高开发效率和项目质量。