关于vue3+element-plus图标自动导入失败的解决方案

 此方法是在依照官方说的按需导入图标情况下发生（并非全局注册, 所以是没有在任何js中导入element组件）

下面是我vue和element的版本及插件配置

上图三个箭头的插件是必备的（顾名思义，unplugin-vue-components是控制组件的，unplugin-icons是控制图标的，unplugin-auto-import是自动引入插件），以下是安装命令

npm i -D unplugin-vue-components unplugin-auto-import unplugin-icons

然后配置vite.config.js（参考地址：https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58）

import path from 'path'
import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'

const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // Auto import functions from Vue, e.g. ref, reactive, toRef...
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ['vue'],
      
            // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
            // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
            resolvers: [
              ElementPlusResolver(),
      
              // Auto import icon components
              // 自动导入图标组件
              IconsResolver({
                prefix: 'Icon',
              }),
            ],
      
            dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
          }),
      
          Components({
            resolvers: [
              // Auto register icon components
              // 自动注册图标组件
              IconsResolver({
                enabledCollections: ['ep'],
              }),
              // Auto register Element Plus components
              // 自动导入 Element Plus 组件
              ElementPlusResolver(),
            ],
      
            dts: path.resolve(pathSrc, 'components.d.ts'),
          }),
      
          Icons({
            autoInstall: true,
          }),
    ],
    resolve: {
        alias: {
            '@': pathSrc,
        },
    }
})

此时准备工作已做好，但如果此时在直接复制el官方代码，控制台会报错，代码（此时没有对element组件做任何导入）和报错如下

<el-icon><Tools/></el-icon>

图标没有出现

控制台的警告，意思是找不到 Tools 这个组件，这就头疼了

一番搜查后发现，只需换种写法（在Tools组件前面加上 i-ep- 就行了）

<el-icon><i-ep-Tools/></el-icon>

“ep”受配置文件影响（不可修改） ,如下：

// 自动注册图标组件
IconsResolver({
    enabledCollections: ['ep'], // 此处
}),

然后就不会报错了，代码一切正常

图标出现了