Vite 常用插件配置：自动导入+自动注册组件+动态创建图标+设置组件名

创建 Vue3+Vite 项目

创建 Vue3 项目

$ pnpm create vue@latest

通过脚手架选择开启以下功能

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / YesScaffolding project in ./<your-project-name>...
Done.

进入并启动项目

cd <your-project-name>
pnpm install
pnpm run dev

配置自动引入

作用：script 中使用配置过的内容不需要明文引入。

安装相关包

pnpm install element-plus @vueuse/core
pnpm install unplugin-auto-import -D

配置自动引入

import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
AutoImport({resolvers: [ElementPlusResolver({ importStyle: 'sass' })],imports: ['vue','vue-router','@vueuse/core',{from: 'element-plus',imports: ['ElMessage', 'ElMessageBox']}],dirs: ['./src/components/*/index.vue','./src/enums/*.ts','./src/utils/*.ts','./src/composables']
}),

配置自动注册组件

作用：页面中使用到的相关包中组件，在 script 中不需要明文引入。

安装相关包

pnpm install unplugin-vue-components -D

配置自动注册组件

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
Components({resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
}),

配置动态生成图标

作用：页面中可以直接通过 组件引用一个 *.svg 文件作为图标使用，设置字体颜色、字体大小等。

安装相关包

pnpm install unplugin-svg-component -D

配置动态生成图标

import UnpluginSvgComponent from 'unplugin-svg-component/vite'
UnpluginSvgComponent({iconDir: path.resolve(__dirname, './src/assets/icons'),projectType: 'vue',vueVersion: 3,prefix: 'icon',dtsDir: path.resolve(__dirname, './src/types/'),dts: true,scanStrategy: 'text',preserveColor: path.resolve(__dirname, './src/assets/icons/preserve')
}),

应用图标

// 取 src/assets/icons 目录下 viewer/edit.svg，不使用原 svg 颜色
<svg-icon name="icon-viewer-edit"></svg-icon>// 取 src/assets/icons 目录下 preserve/home.svg，使用原 svg 颜色
<svg-icon name="icon-preserve-home"></svg-icon>

配置组件名

作用：当使用

安装相关包

pnpm install vite-plugin-vue-setup-extend -D

配置自动注册组件

import Components from 'vite-plugin-vue-setup-extend'
VueSetupExtend()

应用

<script setup name="Viewer"></script>

全部配置

import { defineConfig } from 'vite'
import path from 'path'
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import UnpluginSvgComponent from 'unplugin-svg-component/vite'import VueSetupExtend from 'vite-plugin-vue-setup-extend'// https://vitejs.dev/config/
export default defineConfig({plugins: [AutoImport({resolvers: [ElementPlusResolver({ importStyle: 'sass' })],imports: ['vue','vue-router','@vueuse/core',{from: 'element-plus',imports: ['ElMessage', 'ElMessageBox']}],dirs: ['./src/components/*/index.vue','./src/enums/*.ts','./src/utils/*.ts','./src/composables']}),Components({resolvers: [ElementPlusResolver({ importStyle: 'sass' })]}),UnpluginSvgComponent({iconDir: path.resolve(__dirname, './src/assets/icons'),projectType: 'vue',vueVersion: 3,prefix: 'icon',dtsDir: path.resolve(__dirname, './src/types/'),dts: true,scanStrategy: 'text',preserveColor: path.resolve(__dirname, './src/assets/icons/preserve')}),vue(),vueJsx(),vueDevTools(),VueSetupExtend()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})