常用 vite 插件

1、 @vitejs/plugin-vue
作用：支持Vue单文件组件（SFC）的开发
使用场景：Vue项目开发
安装：npm install @vitejs/plugin-vue --save-dev
配置：

2、@vitejs/plugin-react
作用：支持React项目的开发，包括Fast Refresh功能
使用场景：React项目开发
安装： npm install @vitejs/plugin-react --save-dev
配置：

3、vite-plugin-pages
作用：基于文件系统的路由生成，类似于Nuxt.js的路由系统
使用场景：Vue或React项目中自动生成路由
安装：npm install vite-plugin-pages --save-dev
配置：

4、vite-plugin-md
作用：支持Markdown文件作为Vue组件
使用场景：在Vue项目中直接使用Markdown文件
安装：npm install vite-plugin-md --save-dev
配置：

5、vite-plugin-svg-icons
作用：将SVG图标转换为Vue组件或直接使用
使用场景：在项目中使用SVG图标
安装：npm install vite-plugin-svg-icons --save-dev
配置：

6、vite-plugin-compression
作用：对构建输出的文件进行Gzip或Brotli压缩
使用场景：优化生产环境的资源加载速度
安装：npm install vite-plugin-compression --save-dev
配置：

7、vite-plugin-html
作用：动态修改HTML文件内容，例如注入变量或脚本
使用场景：在HTML中注入环境变量或自定义内容
安装：npm install vite-plugin-html --save-dev
配置：

8、vite-plugin-inspect
作用：检查Vite插件的中间状态，帮助调试插件
使用场景：调试Vite插件或构建过程
安装：npm install vite-plugin-inspect --save-dev
配置：

9、vite-plugin-style-import
作用：按需引入组件库的样式
使用场景：优化组件库的样式加载
安装：npm install vite-plugin-style-import --save-dev
配置：

10、vite-plugin-mock
作用：提供本地mock数据，用于开发环境
使用场景：前端开发时模拟后端接口
安装：npm install vite-plugin-mock --save-dev
配置：

11、vite-plugin-dts
作用：为typescript项目自动生成.d.ts类型声明文件
使用场景：开发typescript库时生成类型声明
安装：npm install vite-plugin-dts --save-dev
配置：

12、vite-plugin-imagemin
作用：压缩图片资源，优化构建输出
使用场景：生产环境下优化图片资源
安装：npm install vite-plugin-imagemin --save-dev
配置：

13、@vitejs/plugin-legacy
作用：将现代 JavaScript 代码转换为旧版浏览器能够理解的语法，同时生成相应的 polyfill 文件，以确保应用程序在旧版浏览器中也能正常运行。
使用场景：基于现代 JavaScript 特性（如 ES 模块、箭头函数、const/let 等）的，这些特性在现代浏览器中可以高效运行，但在旧版浏览器（如 IE 11 或早期版本的 Chrome、Firefox 等）中可能无法正常工作。
安装：npm install @vitejs/plugin-legacy --save-dev
配置：

14、unplugin-auto-import/vite
作用：自动导入常用的模块（如 ref、computed、useRouter 等），无需手动编写 import 语句
使用场景：自动导入常用的 JavaScript/TypeScript 模块（如 Vue、React、Vue Router、Pinia 等），避免手动编写 import 语句。它可以显著提高开发效率，减少重复代码
安装：npm install unplugin-auto-import -D
配置：

15、unplugin-vue-components/vite
作用：自动扫描并注册项目中使用的 Vue 组件，无需手动编写 import 语句。
使用场景：用于在 Vue 项目中自动导入组件。它可以自动扫描并注册项目中使用的 Vue 组件，避免手动编写 import 语句，从而提高开发效率。
安装：npm install unplugin-vue-components -D
配置：

16、postcss-px-to-viewport
作用：将 px 单位转换为视口单位，使得设计能够更好地适应不同设备的屏幕尺寸。
使用场景：将 CSS 中的 px 单位转换为视口单位（如 vw、vh、vmin、vmax），在不同设备上保持设计的一致性和响应性。
安装：npm install postcss-px-to-viewport --save-dev
配置：