vite：15个插件推荐
1. vite-plugin-restart
通過監聽文件修改，自動重啟 vite 服務。
最常用的場景就是監聽 vite.config.js 和 .env.development 文件，我們知道，修改 vite 配置文件和環境配置文件，是需要重啟 vite 才會生效，通過這個插件，我們將從反復重啟中解脫出來。
安裝
npm i vite-plugin-restart -D
配置：vite.config.ts
import ViteRestart from 'vite-plugin-restart' export default {plugins: [ViteRestart({restart: ['my.config.[jt]s',]})], };2. unplugin-vue-components
組件自動按需導入。
安裝：
npm i unplugin-vue-components -D
vite.config.ts
import Components from 'unplugin-vue-components/vite' // ui庫解析器，也可以自定義，需要安裝相關UI庫，unplugin-vue-components/resolvers // 提供了以下集中解析器，使用的時候，需要安裝對應的UI庫，這里以vant示例 // 注釋的是包含的其他一些常用組件庫，供參考 import {// ElementPlusResolver,// AntDesignVueResolver,VantResolver,// HeadlessUiResolver,// ElementUiResolver } from 'unplugin-vue-components/resolvers'export default ({ mode }) => defineConfig({plugins: [Components({dirs: ['src/components'], // 目標文件夾extensions: ['vue','jsx'], // 文件類型dts: 'src/components.d.ts', // 輸出文件，里面都是一些import的組件鍵值對// ui庫解析器，也可以自定義，需要安裝相關UI庫resolvers: [VantResolver(),// ElementPlusResolver(),// AntDesignVueResolver(),// HeadlessUiResolver(),// ElementUiResolver()],})] })原先引用組件的時候需要在目標文件里面import相關組件，現在就可以直接使用無需在目標文件import了，注意大小寫，組件都是大寫開始的。
3. vite-plugin-style-import
當你使用unplugin-vue-components來引入ui庫的時候，message, notification，toast 等引入樣式不生效。
安裝vite-plugin-style-import，實現message, notification，toast 等引入樣式自動引入
安裝：
npm i vite-plugin-style-import -D
vite.config.ts
import styleImport, {// AndDesignVueResolve,VantResolve,// ElementPlusResolve,// NutuiResolve,// AntdResolve } from 'vite-plugin-style-import'export default ({ mode }) => defineConfig({plugins: [styleImport({resolves: [// AndDesignVueResolve(),VantResolve(),// ElementPlusResolve(),// NutuiResolve(),// AntdResolve()],})] })注釋部分為常用的UI組件庫，按照自己的需要引入。
4. unplugin-auto-import
vue3等插件 hooks 自動引入
支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自動引入
效果
// 引入前 import { ref, computed } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2)//引入后 const count = ref(0) const doubled = computed(() => count.value * 2)安裝
npm i unplugin-auto-import -D
vite.config.ts
import AutoImport from 'unplugin-auto-import/vite' export default ({ mode }) => defineConfig({plugins: [AutoImport({imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'],// 可以選擇auto-import.d.ts生成的位置，使用ts建議設置為'src/auto-import.d.ts'dts: 'src/auto-import.d.ts'}),] })5. vite-plugin-svg-icons
用于生成 svg 雪碧圖，方便在項目中使用 .svg 文件。
按照文檔配置好后，搭配阿里巴巴矢量圖標庫使用，只需把下載好的 svg 文件丟到指定目錄，然后就可以項目中愉快的使用了。
安裝：
npm i vite-plugin-svg-icons -D
vite.config.ts配置
import { defineConfig,loadEnv } from 'vite' import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; const path = require("path"); export default ({ mode }) => defineConfig({plugins: [vue(),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/svg')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]'})] })main.ts添加
import 'virtual:svg-icons-register'新建svgIcon.vue
<template><svg class="svg-icon" aria-hidden="true"><use :href="symbolId" /></svg> </template><script setup lang="ts" name="SvgIcon">import { computed } from 'vue'const props = defineProps({prefix: {type: String,default: 'icon'},name: {type: String,required: true},})const symbolId = computed(() => `#${props.prefix}-${props.name}`) </script> <style scope>.svg-icon {width: 1em;height: 1em;vertical-align: -0.1em; /* 因icon大小被設置為和字體大小一致，而span等標簽的下邊緣會和字體的基線對齊，故需設置一個往下的偏移比例，來糾正視覺上的未對齊效果 */fill: currentColor; /* 定義元素的顏色，currentColor是一個變量，這個變量的值就表示當前元素的color值，如果當前元素未設置color值，則從父元素繼承 */overflow: hidden;} </style>在目錄src下新建svg文件夾，在阿里巴巴矢量圖標庫 下載order.svg圖標，放入svg文件夾內。
使用：
<template><div class="home"><svg-icon name="order" class="icon"></svg-icon></div> </template><script setup lang="ts"> // 示例使用了unplugin-vue-components/vite插件自動引入自定義組件 </script><style lang="less" scoped> .icon{font-size: 200px;color: #ff0000; } </style>6. vite-plugin-html
一個針對 index.html，提供壓縮和基于 ejs 模板功能的 vite 插件。
通過搭配 .env 文件，可以在開發或構建項目時，對 index.html 注入動態數據，例如替換網站標題。
安裝：
npm i vite-plugin-html -D
index.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="./favicon.ico" /><link rel="stylesheet" href="./public/reset.css"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title><%- title %></title></head><body><div id="app"></div><%- injectScript %></body> </html>vite.config.ts
import { defineConfig,loadEnv} from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' export default ({ mode }) => defineConfig({// mode 環境變量名，若配置有.env.test，啟動時 --mode test，這里的mode就是testplugins: [createHtmlPlugin({minify: true,/*** 在這里寫entry后，你將不需要在`index.html`內添加 script 標簽，原有標簽需要刪除* @default src/main.ts*/entry: '/src/main.ts',/*** 需要注入 index.html ejs 模版的數據*/inject: {data: {// 查找.env.test文件里面的VITE_PROJECT_TITLE，請以VITE_標識開頭title: loadEnv(mode, process.cwd()).VITE_PROJECT_TITLE, injectScript: `<script src="/inject.js"></script>`,},},})] })7. vite-plugin-compression
使用 gzip 或者 brotli 來壓縮資源。
安裝
npm i vite-plugin-compression -D
vite.config.ts
import { defineConfig,loadEnv} from 'vite' import viteCompression from 'vite-plugin-compression'; export default ({ mode }) => defineConfig({plugins: [viteCompression()] })8. vite-plugin-imagemin
打包壓縮圖片
安裝
npm i vite-plugin-imagemin -D
國內用戶安裝需要在電腦host文件（C：\Windows\System32\drivers\etc）上加下以下配置：
199.232.4.133 raw.githubusercontent.com
我自己安裝的時候發現還是不行，然后還是選擇了他不推薦的cnpm安裝成功了- -
我發現我的4M圖片壓縮后，文件被旋轉了90度，這？
import { defineConfig,loadEnv} from 'vite' import viteImagemin from 'vite-plugin-imagemin' export default ({ mode }) => defineConfig({plugins: [viteImagemin({gifsicle: { // gif圖片壓縮optimizationLevel: 3, // 選擇1到3之間的優化級別interlaced: false, // 隔行掃描gif進行漸進式渲染// colors: 2 // 將每個輸出GIF中不同顏色的數量減少到num或更少。數字必須介于2和256之間。},optipng: { // pngoptimizationLevel: 7, // 選擇0到7之間的優化級別},mozjpeg: {// jpegquality: 20, // 壓縮質量，范圍從0(最差)到100(最佳)。},pngquant: {// pngquality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之間的數字，類似于JPEG。達到或超過最高質量所需的最少量的顏色。如果轉換導致質量低于最低質量，圖像將不會被保存。speed: 4, // 壓縮速度，1(強力)到11(最快)},svgo: { // svg壓縮plugins: [{name: 'removeViewBox',},{name: 'removeEmptyAttrs',active: false,},],},}),] })9. vite-plugin-purge-icons
此插件是可以讓我們很方便高效的使用Iconify中所有的圖標（本人表示沒有用過…）。
10. @vitejs/plugin-vue-jsx
此插件支持在vue3中使用jsx/tsx語法
安裝
npm i @vitejs/plugin-vue-jsx
vite.config.ts
import { defineConfig,loadEnv} from 'vite' import vuejsx from "@vitejs/plugin-vue-jsx" export default ({ mode }) => defineConfig({plugins: [vuejsx()] })jsx文件：
（jsx組件中自動跳過生命周期，即jsx中沒有生命周期，在父組件onBeforeMount后執行）
11. vite-plugin-vue-setup-extend
setup語法糖name增強，使vue3語法糖支持name屬性。
vue3語法糖默認是沒有name屬性的，在我們使用keep-alive的時候需要用到name。
安裝
npm i vite-plugin-vue-setup-extend -D
vite.config.ts
import { defineConfig} from 'vite' import vueSetupExtend from 'vite-plugin-vue-setup-extend' export default ({ mode }) => defineConfig({plugins: [vueSetupExtend()] }使用
<script setup lang="ts" name="home"> </script>12. vitejs-plugin-legacy
Vite默認的瀏覽器支持基線是原生ESM。該插件為不支持原生ESM的傳統瀏覽器提供支持。
13. @vitejs/plugin-vue
vite支持vue開發
14. vite-plugin-vue-images
自動導入圖像，同級目錄的文件名不能重復！
安裝
npm i vite-plugin-vue-images -D
vite.config.ts
import { defineConfig,loadEnv} from 'vite' import ViteImages from 'vite-plugin-vue-images' export default ({ mode }) => defineConfig({plugins: [ViteImages({dirs: ['src/assets'], // 圖像目錄的相對路徑extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的圖像擴展customResolvers:[], // 覆蓋名稱->圖像路徑解析的默認行為customSearchRegex: '([a-zA-Z0-9]+)', // 重寫搜索要替換的變量的Regex。}),]假設有以下文件及路徑
logo.png： src/assets/logo.png
name1.jpg： src/assets/test/name1.jpg
使用方式：
<template><div class="home"><img :src="Logo" /><img :src="TestName1" /> </div> </template><script setup lang="ts"> </script><style lang="less" scoped> </style>插件將轉換為：
<template><div class="home"><img :src="Logo" /><img :src="TestName1" /> </div> </template><script setup lang="ts"> import Logo from '@/assets/logo.png' import TestName1 from '@/assets/test/name1.jpg' </script><style lang="less" scoped> </style>15. vue-global-api
unplugin-auto-import插件的繼承者，解決因為它的自動導入導致的eslint報錯
安裝
npm i vue-global-api
main.ts添加
import 'vue-global-api'總結
以上是生活随笔為你收集整理的vite：15个插件推荐的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Duilib开发环境搭建
- 下一篇： YII2 随笔 视图最佳实践