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
注意，-ep- 是 vite.config.ts 文件中配置的，必须保持一致
详细文章可以查看下面链接
链接：https://blog.csdn.net/weixin_36757282/article/details/125787811
