vite插件介绍
因为 Vite 依赖于 Rollup ,这意味着 Vite 可以利用 Rollup 插件的强大生态系统。很多功能性的支持,在 Rollup 项目中需要添加插件,而在 Vite 为了能够提供开箱即用的体验,已经内建支持了。在前面的功能概览讲解中,我们已经看到了,你可以具体去看:https://cn.vitejs.dev/guide/features.html
除此之外,官方也提供了一系列插件,比如 Vue 3 单文件组件的解析插件:@vitejs/plugin-vue。在初始化项目完成后,在配置文件 Vite.config.js 的默认配置中就能看到:
下面就介绍一下项目中常用的几个插件。
一、unplugin-auto-import
场景应用:避免写一大堆的import,比如关于Vue和Vue Router的,按需自动加载API插件
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载API插件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //按需加载elementplus
export default function createAutoImport() {
return AutoImport({
imports: ["vue", "vue-router", 'pinia'],
resolvers: [ElementPlusResolver()]
})
}
二、vite-plugin-vue-setup-extend
场景应用:在使用vue3写组建的时候用的是setup语法糖,需要把组件抽出来做成插件,在项目中install使用,需要给组建命名
/**/
import setupExtend from 'vite-plugin-vue-setup-extend'
export default function createSetupExtend() {
return setupExtend()
}
三、rollup-plugin-visualizer
场景应用:rollup-plugin-visualizer是一个打包体积分析插件,对应webpack中的webpack-bundle-analyzer。配置好后运行构建命令会生成一个stats.html。
import { visualizer } from 'rollup-plugin-visualizer'
export default function createAutoImport() {
return visualizer()
}
四、vite-plugin-svg-icons
场景应用:通过vite-plugin-svg-icons 使用SVG图片
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
import path from 'path'
export default function createSvgIcon() {
return createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
})
}
四、unplugin-vue-components
场景应用:unplugin-vue-components 插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件)使用此插件后,不需要手动编写 import { Button } from 'ant-design-vue’这样的代码了,插件会自动识别 template中使用的自定义组件并自动注册。
import Components from 'unplugin-vue-components/vite'//按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default function createAutoImport() {
return Components({
dirs: ['src/components'], // 配置需要默认导入的自定义组件文件夹,该文件夹下的所有组件都会自动 import
resolvers: [ElementPlusResolver()],
})
}
五、vite-plugin-vue-devtools
场景应用:使用 Vue 的同学应该对 Vue Devtools 浏览器插件并不陌生,但是有些同学由于网络问题无法下载安装插件,所以今天给大家推荐一款更好用的插件 vite-plugin-vue-devtools,无需浏览器安装,直接使用npm安装即可使用,并且界面也很美观,功能更加强大。
import VueDevTools from 'vite-plugin-vue-devtools'
export default function createAutoImport() {
return VueDevTools()
}
插件统一处理 ,注册vite.config.js
import vue from '@vitejs/plugin-vue'
// 导入自动导入
import createAutoImport from './auto-import'
// 导入SVG图标
import createSvgIcon from './svg-icon'
// 导入扩展设置
import createSetupExtend from './setup-extend'
// 导入Vue组件
import createVueComponents from './vue-components'
// 导入Rollup可视化
import createRollupVisualizer from './rollup-visualizer'
// 导入Vue Devtools
import createVueDevtools from './vue-devtools'
// 导出Vite插件
export default function createVitePlugins() {
// 初始化Vite插件数组
const vitePlugins = [vue()]
// 添加自动导入
vitePlugins.push(createAutoImport())
// 添加扩展设置
vitePlugins.push(createSetupExtend())
// 添加SVG图标
vitePlugins.push(createSvgIcon())
// 添加Vue组件
vitePlugins.push(createVueComponents())
// 添加Rollup可视化
vitePlugins.push(createRollupVisualizer())
// 添加Vue Devtools
vitePlugins.push(createVueDevtools())
// 返回Vite插件
return vitePlugins
}
///vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import createVitePlugins from './vite/plugins'
export default defineConfig(({ mode, command }) => {
return {
plugins: [
createVitePlugins()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
port: 3000, // 监听的端口,默认 3000
host: '0.0.0.0',// 监听的主机名,设置为 0.0.0.0 允许外部访问
https: false,
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
css: {
devSourcemap: true, // 开发中能够快速找到某样式对应的样式文件
//预处理器配置项
preprocessorOptions: {
less: {
math: "always" //支持直接使用表达式 width: 100px - 20px;得到值为width:80px;
}
}
},
}
})
总结
建议项目中插件集合新建个文件夹统一管理,方便维护,本文章就介绍这么多