Vite官网中，有推荐的一些plugins提供使用，并提供了链接，可以查找到“一些遵循了 推荐约定 的 Vite 插件“，今天推荐一些常见与特别有用的插件，并在项目中使用它们。

npm Vite 插件搜索链接

一、推荐Vite plugins

1. unplugin-auto-import

解决Vite,Vue等API的自动导入

• 第一步：安装
  npm i -D unplugin-auto-import

• 第二部：插件配置
  为了对vite的plugins的进行方便管理，将在项目根目录中添加文件夹vite-plugins，建立index.js

  // 文件/vite-plugins/index.js内容
  import autoImpot from 'unplugin-auto-import'
  export default function vitePluginsInit(){
    //1.默认vue相关api自动导入
    const vitePlugins = [vue()];
    //2.自动导入插件
    vitePlugins.push(autoImpot({
        imports:[
            'vue',
            'vue-router',
            'pinia'
        ],
        dts : false
    }));
    return vitePlugins;
  }

  vite.config.js进行一下改造

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import vitePluginsInit from './vite-plugins'
  // https://vitejs.dev/config/
  export default defineConfig(({ mode, command }) => {
    return {
        plugins: vitePluginsInit(),
        // 1.vite 服务器配置
        server: {
            port: 8080,
            host: true,
            open: true
        },
    }
  })

2.vite-plugin-svg-icons

用于生成 svg 雪碧图，方便在项目中使用 .svg 文件。
搭配阿里巴巴矢量图标库使用，只需把下载好的 svg 文件丢到指定目录就能直接使用了。

• 预加载 在项目运行时就生成所有图标,只需操作一次 dom

3.autoprefixer

官方介绍：
Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀.

通俗来说就是：为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀
举栗子：

//Autoprefixer处理前css代码
display:flex;
//Autoprefixer处理后css代码
display:-webkit-box;
display:-ms-flexbox;
display:flex;

• 进行安装：npm i autoprefixer
• 进行配置：vite.config.js

  css: {
    postcss: {
        plugins: [autoprefixer]
    }
  }

• package.json

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]