自动导入组件和图标配置, 这些配置项其实看官网的也是可以的,不过配置图标的时候有个重要的依赖@iconify-json/ep ,官网没提, 也是很容易被忽略的一个依赖,缺了这个依赖,图标的自动导入是没有效果的,

下载依赖

  "dependencies": {"@element-plus/icons-vue": "^2.3.1", "@iconify-json/ep": "^1.1.15","element-plus": "^2.7.3",},"devDependencies": {"unplugin-auto-import": "^0.17.6","unplugin-icons": "^0.19.0","unplugin-vue-components": "^0.27.0",}

配置项

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
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 Inspect from "vite-plugin-inspect";export default defineConfig({plugins: [vue(),AutoImport({imports: ["vue", "vue-router"],dts: "src/types/auto-import.d.ts", // 路径下自动生成文件夹存放全局指令resolvers: [ElementPlusResolver(),IconsResolver({prefix: "Icon",}),],}),Components({dirs: ["src/components"], // 指定需要自动导入的组件所在的目录列表dts: "src/types/components.d.ts", // 是否生成类型声明文件 true会生成`.d.ts`的文件,也可以使用字符串地址来指定文件的位置resolvers: [ElementPlusResolver(),IconsResolver({enabledCollections: ["ep"],}),], // 指定}),Icons({autoInstall: true,}),//  这个和题目无关Inspect(),],// 这个和题目无关server: {host: "0.0.0.0",},// 这个和题目无关resolve: {alias: {"@": path.resolve(__dirname, "./src"),"@back": path.resolve(__dirname, "./src/views/back-stage"),},},
});

使用

// 之前的
//<el-icon><location /></el-icon> 
//<el-icon><DocumentDelete /></el-icon>//现在的
<el-icon><i-ep-location /></el-icon>
<el-icon><i-ep-DocumentDelete /></el-icon>
// 这样拆开写也是可以的
<el-icon><i-ep-document-delete /></el-icon>