1. vite-plugin-restart

通過監(jiān)聽文件修改，自動(dòng)重啟 vite 服務(wù)。

最常用的場景就是監(jiān)聽 vite.config.js 和 .env.development 文件，我們知道，修改 vite 配置文件和環(huán)境配置文件，是需要重啟 vite 才會(huì)生效，通過這個(gè)插件，我們將從反復(fù)重啟中解脫出來。

安裝

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

組件自動(dòng)按需導(dǎo)入。

安裝：

npm i unplugin-vue-components -D

vite.config.ts

import Components from 'unplugin-vue-components/vite' // ui庫解析器，也可以自定義，需要安裝相關(guān)UI庫，unplugin-vue-components/resolvers // 提供了以下集中解析器，使用的時(shí)候，需要安裝對應(yīng)的UI庫，這里以vant示例 // 注釋的是包含的其他一些常用組件庫，供參考 import {// ElementPlusResolver,// AntDesignVueResolver,VantResolver,// HeadlessUiResolver,// ElementUiResolver } from 'unplugin-vue-components/resolvers'export default ({ mode }) => defineConfig({plugins: [Components({dirs: ['src/components'], // 目標(biāo)文件夾extensions: ['vue','jsx'], // 文件類型dts: 'src/components.d.ts', // 輸出文件，里面都是一些import的組件鍵值對// ui庫解析器，也可以自定義，需要安裝相關(guān)UI庫resolvers: [VantResolver(),// ElementPlusResolver(),// AntDesignVueResolver(),// HeadlessUiResolver(),// ElementUiResolver()],})] })

原先引用組件的時(shí)候需要在目標(biāo)文件里面import相關(guān)組件，現(xiàn)在就可以直接使用無需在目標(biāo)文件import了，注意大小寫，組件都是大寫開始的。

3. vite-plugin-style-import

當(dāng)你使用unplugin-vue-components來引入ui庫的時(shí)候，message, notification，toast 等引入樣式不生效。

安裝vite-plugin-style-import，實(shí)現(xiàn)message, notification，toast 等引入樣式自動(dòng)引入

安裝：

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 自動(dòng)引入

支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自動(dòng)引入

效果

// 引入前 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建議設(shè)置為'src/auto-import.d.ts'dts: 'src/auto-import.d.ts'}),] })

5. vite-plugin-svg-icons

用于生成 svg 雪碧圖，方便在項(xiàng)目中使用 .svg 文件。

按照文檔配置好后，搭配阿里巴巴矢量圖標(biāo)庫使用，只需把下載好的 svg 文件丟到指定目錄，然后就可以項(xiàng)目中愉快的使用了。

安裝：

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大小被設(shè)置為和字體大小一致，而span等標(biāo)簽的下邊緣會(huì)和字體的基線對齊，故需設(shè)置一個(gè)往下的偏移比例，來糾正視覺上的未對齊效果 */fill: currentColor; /* 定義元素的顏色，currentColor是一個(gè)變量，這個(gè)變量的值就表示當(dāng)前元素的color值，如果當(dāng)前元素未設(shè)置color值，則從父元素繼承 */overflow: hidden;} </style>

在目錄src下新建svg文件夾，在阿里巴巴矢量圖標(biāo)庫 下載order.svg圖標(biāo)，放入svg文件夾內(nèi)。

使用：

<template><div class="home"><svg-icon name="order" class="icon"></svg-icon></div> </template><script setup lang="ts"> // 示例使用了unplugin-vue-components/vite插件自動(dòng)引入自定義組件 </script><style lang="less" scoped> .icon{font-size: 200px;color: #ff0000; } </style>

6. vite-plugin-html

一個(gè)針對 index.html，提供壓縮和基于 ejs 模板功能的 vite 插件。

通過搭配 .env 文件，可以在開發(fā)或構(gòu)建項(xiàng)目時(shí)，對 index.html 注入動(dòng)態(tài)數(shù)據(jù)，例如替換網(wǎng)站標(biāo)題。

安裝：

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 環(huán)境變量名，若配置有.env.test，啟動(dòng)時(shí) --mode test，這里的mode就是testplugins: [createHtmlPlugin({minify: true,/*** 在這里寫entry后，你將不需要在`index.html`內(nèi)添加 script 標(biāo)簽，原有標(biāo)簽需要?jiǎng)h除* @default src/main.ts*/entry: '/src/main.ts',/*** 需要注入 index.html ejs 模版的數(shù)據(jù)*/inject: {data: {// 查找.env.test文件里面的VITE_PROJECT_TITLE，請以VITE_標(biāo)識(shí)開頭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

國內(nèi)用戶安裝需要在電腦host文件（C：\Windows\System32\drivers\etc）上加下以下配置：

199.232.4.133 raw.githubusercontent.com

我自己安裝的時(shí)候發(fā)現(xiàn)還是不行，然后還是選擇了他不推薦的cnpm安裝成功了- -

我發(fā)現(xiàn)我的4M圖片壓縮后，文件被旋轉(zhuǎn)了90度，這？

import { defineConfig,loadEnv} from 'vite' import viteImagemin from 'vite-plugin-imagemin' export default ({ mode }) => defineConfig({plugins: [viteImagemin({gifsicle: { // gif圖片壓縮optimizationLevel: 3, // 選擇1到3之間的優(yōu)化級(jí)別interlaced: false, // 隔行掃描gif進(jìn)行漸進(jìn)式渲染// colors: 2 // 將每個(gè)輸出GIF中不同顏色的數(shù)量減少到num或更少。數(shù)字必須介于2和256之間。},optipng: { // pngoptimizationLevel: 7, // 選擇0到7之間的優(yōu)化級(jí)別},mozjpeg: {// jpegquality: 20, // 壓縮質(zhì)量，范圍從0(最差)到100(最佳)。},pngquant: {// pngquality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之間的數(shù)字，類似于JPEG。達(dá)到或超過最高質(zhì)量所需的最少量的顏色。如果轉(zhuǎn)換導(dǎo)致質(zhì)量低于最低質(zhì)量，圖像將不會(huì)被保存。speed: 4, // 壓縮速度，1(強(qiáng)力)到11(最快)},svgo: { // svg壓縮plugins: [{name: 'removeViewBox',},{name: 'removeEmptyAttrs',active: false,},],},}),] })

9. vite-plugin-purge-icons

此插件是可以讓我們很方便高效的使用Iconify中所有的圖標(biāo)（本人表示沒有用過…）。

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組件中自動(dòng)跳過生命周期，即jsx中沒有生命周期，在父組件onBeforeMount后執(zhí)行）

const component = (props:any,context:any) => {console.log(props)const onClick = () => { context.emit('update')}return <divstyle={{fontSize: 12,color: '#999'}}onClick={()=>onClick()}>我是jsx函數(shù)組件{props.text}</div> }export default component

11. vite-plugin-vue-setup-extend

setup語法糖name增強(qiáng)，使vue3語法糖支持name屬性。

vue3語法糖默認(rèn)是沒有name屬性的，在我們使用keep-alive的時(shí)候需要用到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默認(rèn)的瀏覽器支持基線是原生ESM。該插件為不支持原生ESM的傳統(tǒng)瀏覽器提供支持。

13. @vitejs/plugin-vue

vite支持vue開發(fā)

14. vite-plugin-vue-images

自動(dòng)導(dǎo)入圖像，同級(jí)目錄的文件名不能重復(fù)！

安裝

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'], // 有效的圖像擴(kuò)展customResolvers:[], // 覆蓋名稱->圖像路徑解析的默認(rèn)行為customSearchRegex: '([a-zA-Z0-9]+)', // 重寫搜索要替換的變量的Regex。}),]

假設(shè)有以下文件及路徑

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>

插件將轉(zhuǎn)換為：

<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插件的繼承者，解決因?yàn)樗淖詣?dòng)導(dǎo)入導(dǎo)致的eslint報(bào)錯(cuò)

安裝

npm i vue-global-api

main.ts添加

import 'vue-global-api'

總結(jié)

以上是生活随笔為你收集整理的vite：15个插件推荐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。