typescript 项目中 vite 配置自动按需导入组件库函数需使用 unplugin-auto-import 插件配合对应 ui 库 resolver（如 elementplusresolver），安装依赖、配置 vite.config.ts 启用 dts 生成类型声明，并将 auto-imports.d.ts 加入 tsconfig.json include。
在 TypeScript 项目中，Vite 配置自动按需导入组件库函数（如 Element Plus 的 ElMessage、ElMessageBox，或 Naive UI 的 useDialog 等），核心是结合 unplugin-auto-import 插件 + 对应 UI 库的 Resolver（解析器）。
安装必要依赖
以 Element Plus 为例：
-
npm install element-plus（运行时依赖） -
npm install -D unplugin-auto-import unplugin-vue-components（开发依赖） - 若使用 TypeScript，确保已启用类型声明生成（插件会自动生成
.d.ts文件）
配置 vite.config.ts 自动导入函数
在 vite.config.ts 中添加 AutoImport 插件，并指定组件库函数的来源与映射：
- 直接写死导入项（适合少量常用函数）：
{ from: 'element-plus', imports: ['ElMessage', 'ElMessageBox'] } - 使用官方 Resolver（推荐，支持更多 API 和自动推导）：
导入ElementPlusResolver，并传入resolvers数组 - 必须开启
dts选项，生成auto-imports.d.ts，否则 TS 编辑器无法识别自动导入的变量 - 建议同时启用
eslintrc: { enabled: true }，避免 ESLint 报no-undef
完整配置示例（Element Plus）
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
'vue',
'vue-router',
'@vueuse/core',
{
from: 'element-plus',
imports: ['ElMessage', 'ElMessageBox', 'ElNotification']
}
],
resolvers: [ElementPlusResolver()], // 同时支持组件和函数的自动解析
dts: 'src/auto-imports.d.ts',
eslintrc: { enabled: true }
})
]
})
✅ 配置后，你可在任意 .vue 或 .ts 文件中直接使用：ElMessage.success('操作成功') —— 无需 import 语句。
注意事项
- 不同 UI 库对应不同的 Resolver：
Naive UI →NaiveUiResolver，Ant Design Vue →AntDesignVueResolver，Vant →VantResolver - 确保
src/auto-imports.d.ts已被包含在tsconfig.json的"include"字段中，例如："include": ["src/**/*", "src/auto-imports.d.ts"] - 函数名必须是组件库导出的具名导出（named export），不支持默认导出（
default）的函数自动识别，需手动写明映射 - 若函数来自自定义 hooks 目录（如
src/composables/useApi.ts），可通过dirs选项启用文件扫描：dirs: ['src/composables']
