Vite按需导入element-plus组件和icon

Vue3-Vite项目中使用element-plus，按需导入element-plus组件和el-icon，以及自动导入Vue相关函数。

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。配置也更加简单，可以直接参考element-plus的官网。

安装依赖

npm i element-plus @element-plus/icons-vue
npm i unplugin-auto-import unplugin-vue-components unplugin-icons unplugin-element-plus -D

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动导入图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import ElementPlus from 'unplugin-element-plus/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 按需导入，自动导入
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        })
      ],
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          // 前缀（经测试，该选项无作用，图标依然只能通过 i-ep-xxx 调用）
          // <el-icon><Lock /></el-icon>  这样按需引入的话，这种形式的el-icon code就用不了了
          // 只能 <el-icon><i-ep-lock /></el-icon>
          enabledCollections: ['ep'],
        }),
        // 自动导入 Element Plus 组件
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ],
    }),
    Icons({
      autoInstall: true,
    }),
    // 手动导入 el 组件，会自动添加对应的 css
    // 替换默认语言
    ElementPlus({
      defaultLocale: 'zh-cn',
      useSource: true
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

element-plus官网所使用的el-icon格式化为

而采用以上按需导入icon的方法则需要使用以下图标格式

本文章参考内容：

• ice-cream-admin
• [vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入](https://blog.csdn.net/qq_34569497/article/details/130411712?ops_request_misc={"request_id"%3A"170273200116800180629771"%2C"scm"%3A"20140713.130102334.."}&request_id=170273200116800180629771&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-130411712-null-null.142^v96pc_search_result_base8&utm_term=element-plus icon自动导入&spm=1018.2226.3001.4187)