Vite 中实现自动导入需配置 unplugin-auto-import（自动导入 API 和工具函数）和 unplugin-vue-components（自动导入 Vue 组件），二者配合 @vitejs/plugin-vue 可零配置完成，还需在 tsconfig.json 中包含生成的 .d.ts 文件以确保类型提示生效。
在 Vite 中实现自动导入 API 与组件，主流方案是使用 unplugin-auto-import（用于自动导入函数、Hooks、Ref 等）和 unplugin-vue-components（用于自动导入 Vue 组件），二者配合官方推荐的 Vue 官方插件（@vitejs/plugin-vue）即可零配置完成大部分场景的自动导入。
安装并配置 unplugin-auto-import
它能自动为 ref、computed、onMounted 等 Composition API，以及你自定义的工具函数、第三方库（如 axios、lodash）生成按需导入语句，无需手动写 import。
- 安装：
npm i -D unplugin-auto-import - 在
vite.config.ts中添加插件：
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: './src/auto-imports.d.ts', // 生成类型声明，保证 TS 提示正常
dirs: ['./src/composables', './src/utils'], // 自动扫描目录下的导出函数
vueTemplate: true // 允许在 .vue 模板中也自动导入（如 v-model 的 ref）
})
]
})
安装并配置 unplugin-vue-components
它会自动扫描 components/ 目录下符合命名规则的 Vue 组件（如 Button.vue → 可直接用 <Button></Button>），无需在每个页面里 import 和 components: 注册。
- 安装：
npm i -D unplugin-vue-components - 配置（同样在
vite.config.ts）：
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
dts: './src/components.d.ts', // 生成组件类型声明
// 默认扫描 src/components，也可自定义：
// dirs: ['./src/my-components']
// 可选：启用对 UI 库的支持（如 Element Plus、Ant Design Vue）
// resolvers: [ElementPlusResolver()]
})
]
})
确保类型提示生效（TypeScript 用户必做）
两个插件都支持生成 .d.ts 声明文件，但需要将它们加入 tsconfig.json 的 include 字段，否则 VS Code 不识别自动导入的变量或组件：
立即学习“Java免费学习笔记（深入）”；
{
"include": [
"src/**/*.ts",
"src/**/*.d.ts", // ? 加上这一行
"src/**/*.tsx",
"src/**/*.vue"
]
}
首次运行后，Vite 会生成 auto-imports.d.ts 和 components.d.ts，建议提交到 Git（除非你用 .gitignore 排除了 .d.ts 文件）。
常见问题与补充说明
-
模板中无法使用自动导入的 ref？ 确保
vueTemplate: true已开启，并使用@vitejs/plugin-vue（Vite 4+ 默认内置，无需额外安装） -
自定义 Hook 没被识别？ 检查
dirs路径是否正确，且文件默认导出（export default function useXxx()）或具名导出（export function useXxx()）均可被识别 -
组件命名冲突（如多个
Button.vue）？ 插件默认按文件名注册，建议保持组件名唯一；可通过deep: true或extensions: ['vue']控制扫描行为 -
不希望某些组件被自动导入？ 在组件文件顶部加注释
// @unplugin-vue-components-disable
