Vite 常用插件

🎯 引言

学会这篇文章，你能理解 Vite 插件的作用，安装并使用官方插件处理 Vue、旧浏览器兼容等问题，还会知道去哪里找社区插件。插件是扩展 Vite 能力的主要方式。

🧱 插件是什么

Vite 本身只处理最基础的开发服务器和构建流程。项目里还需要把 .vue 文件变成 JS、把 TypeScript 转成 JS、压缩图片、生成 PWA 等功能，这些都需要插件来完成。

插件就像手机的 App：手机本身能打电话，但你要导航、听音乐、看视频，就得装对应的 App。

Vite 插件通常来自三个地方：

• 官方插件：以 @vitejs/plugin- 开头。
• 框架插件：比如 @vitejs/plugin-vue。
• 社区插件：以 vite-plugin- 开头的第三方插件。

✨ 常用官方插件

@vitejs/plugin-vue

Vue3 项目必备，让 Vite 能解析 .vue 单文件组件。

npm install -D @vitejs/plugin-vue

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [vue()],
});

@vitejs/plugin-legacy

让打包后的代码兼容旧浏览器，例如 IE11。它会为旧浏览器生成额外的 polyfill 包。

npm install -D @vitejs/plugin-legacy

import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
    plugins: [
        legacy({
            targets: ['defaults', 'not IE 11'],
        }),
    ],
});

🛠 社区插件示例

社区插件非常多，这里举一个常见场景：

unplugin-auto-import

自动引入常用 API，比如 Vue 的 ref、computed、watch，不用每个文件手动 import。

npm install -D unplugin-auto-import

import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
    plugins: [
        AutoImport({
            imports: ['vue'],
        }),
    ],
});

🧾 小节总结

• Vite 插件扩展了 Vite 处理文件和构建的能力。
• Vue3 项目用 @vitejs/plugin-vue 来解析 .vue 单文件组件。
• @vitejs/plugin-legacy 用于兼容旧浏览器。
• 社区插件通过 npm 搜索 vite-plugin-xxx 即可找到，使用前先看 README 和下载量。

❓ 知识问答

Q1：插件要安装到 dependencies 还是 devDependencies？

构建工具类插件一般安装到 devDependencies，因为它们只在开发和构建时使用，不会进入最终产物。

Q2：Vite 插件和 Webpack Loader / Plugin 有什么区别？

概念类似，都是扩展构建流程。Vite 插件基于 Rollup 插件规范，写法更统一。

Q3：插件顺序重要吗？

大多数情况下不影响，但某些插件之间有依赖关系，建议按官方文档推荐的顺序配置。

🧪 小练习

给你的 Vue 项目添加 @vitejs/plugin-vue 和 @vitejs/plugin-legacy：

1. 安装两个插件。
2. 在 vite.config.js 中注册。
3. 运行 npm run build，观察 dist 目录是否生成额外的 legacy 文件。

import { defineConfig } from 'vite';

// 请在这里引入并注册插件

🎉 恭喜你掌握了 Vite 插件的使用！下一篇我们来学习环境变量和模式。