vite插件机制基于rollup接口并扩展特有钩子，通过vite.config.js的plugins数组注册，按顺序执行，高频插件包括vue、react、legacy、mock和svg-icons等，可实现源码转换、请求拦截、产物修改等功能。
Vite 的插件机制是其扩展能力的核心，它基于 Rollup 的插件接口，并增加了 Vite 特有的生命周期钩子和开发服务器能力。用好插件，不需要重写构建逻辑，就能快速支持新语法、优化资源、代理请求或兼容旧浏览器。
插件怎么加进项目里
所有插件都通过 vite.config.js 的 plugins 数组注册。每个插件是一个函数，返回包含钩子的对象（比如 buildStart、transform、configureServer 等）。
- 安装插件：例如
npm install @vitejs/plugin-vue -D - 导入并启用：在配置中调用插件函数，如
vue() - 注意顺序：Vite 按数组顺序执行插件，靠前的插件可先处理代码，也更容易被后续插件覆盖
哪些插件属于高频刚需
不同技术栈有不同基础依赖，但以下几类插件几乎每个项目都会遇到：
- @vitejs/plugin-vue：Vue 单文件组件（.vue）解析必备，Vue3 项目默认已含
- @vitejs/plugin-react：React 项目启用 JSX/TSX 支持
- @vitejs/plugin-legacy：需要兼容 IE11 或低版本 Chrome 时生成降级代码和 polyfill
- vite-plugin-mock：开发阶段模拟 API 接口，无需后端联调
- vite-plugin-svg-icons：把 SVG 文件自动注册为组件，方便按需引入
插件能做什么具体事
插件不是黑盒，它通过声明式钩子介入构建流程，常见用途包括：
-
转换源码：用
transform钩子处理 .ts、.scss、.md 文件，比如转译 TypeScript 或提取 Markdown 元数据 -
拦截请求：在
configureServer中访问 dev server 实例，添加自定义中间件（如 mock 路由或请求日志） -
修改打包产物：在
generateBundle钩子中重命名 chunk、注入全局变量、压缩 HTML -
预构建控制：用
resolveId或load影响 esbuild 对依赖的预构建行为
自己写个简单插件试试
比如想给所有 JS 文件末尾自动加一行版权注释，可以这样写：
export default function copyrightPlugin() {
return {
name: 'add-copyright',
transform(code, id) {
if (id.endsWith('.js')) {
return code + '\n\n// © ' + new Date().getFullYear() + ' My Team';
}
}
};
}
然后在 vite.config.js 的 plugins 里加入 copyrightPlugin() 即可生效。调试时可用 console.log 输出 id 和 code 快速验证。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
