vue3+vite项目中常用的 vite插件整理

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;
        }
      }
    },
  }
})

---

总结

建议项目中插件集合新建个文件夹统一管理，方便维护，本文章就介绍这么多