import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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'
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 设置别名
    }
  },
  plugins: [vue(), AutoImport({
    imports: ['vue'],     //  vue3  setup 语法糖下 不需要导入就可以直接使用一些属性 如 ref reactive 
    dts: 'src/auto-import.d.ts'
  }),
  AutoImport({
    resolvers: [ElementPlusResolver(),
    IconsResolver({
      prefix: 'Icon',
    }),
    ],
    dts: 'src/auto-Notification.d.ts'
  }),
  Components({
    resolvers: [ElementPlusResolver(),
    IconsResolver({
      enabledCollections: ['ep'],  //    重点     <el-icon :size="20"><i-ep-Document /></el-icon> 一这种格式编写
    }),
    ],
    dts: 'src/components.d.ts', // 路径
  }),
  Icons({
    autoInstall: true,
  }),
    // Inspect(),
  ],

})

需要下载的环境变量

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

image.png

官方示例
https://github.com/sxzz/element-plus-best-practices/blob/db2dfc983ccda5570033a0ac608a1bd9d9a7f658/vite.config.ts#L21-L58

注意，-ep- 是 vite.config.ts 文件中配置的，必须保持一致

详细文章可以查看下面链接
链接：https://blog.csdn.net/weixin_36757282/article/details/125787811