Vite 实现自动按需导入

一、快速配置指南

1.1、安装核心插件

pnpm i unplugin-auto-import unplugin-vue-components -D

1.2、插件功能对比

插件名称	核心功能	典型应用场景
unplugin-auto-import	自动导入 JS/TS API	Vue Composition API
unplugin-vue-components	自动注册 Vue 组件	UI 组件库按需加载

二、配置示例（vite.config.ts）

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    /** 自带 api 的自动化导入 */
    AutoImport({
      // 自动导入 vue、vue-router、Pinia 相关函数
      imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
      dts: 'types/auto-generate/auto-import.d.ts', // 类型声明生成路径
      dirs: ['src/store/modules', 'src/hooks'], // 配置其它需要导入的文件目录
    }),

    /** 组件及其类型的自动化导入 */
    Components({
      dts: 'types/auto-generate/auto-components.d.ts', // 类型声明生成路径
      dirs: ['src/components'], // 自动扫描本地组件 配置其它需要导入的文件目录 默认 'src/components'
    }),
  ],
})

三、使用效果对比

3.1、传统方式

<template>
  <MyButton @click="count++">{{ count }}</MyButton>
</template>

<script setup>
import { ref } from 'vue'
import MyButton from '@/components/MyButton.vue'

const count = ref(0)
</script>

3.2、自动导入后

<script setup>
const count = ref(0) // 自动导入 ref
</script>

<template>
  <!-- 自动注册组件 -->
  <MyButton @click="count++">{{ count }}</MyButton>
</template>

四、注意事项

4.1、类型声明文件

• auto-imports.d.ts：记录自动导入的 API 类型声明
• auto-components.d.ts：记录组件注册的类型声明
• 首次运行后会自动生成，需提交到版本控制

4.2、tsconfig.json 配置

{
  // 定义希望被编译的文件所在的目录 ** 代表任意目录 * 代表任意文件
  "include": ["types/**/*.d.ts"]
}

4.3、常见问题排查

• 找不到类型声明：重启 IDE 或重新运行 pnpm dev
• 组件未自动注册：检查 dirs 配置路径是否正确
• API 未自动导入：确认 imports 配置包含目标库

五、进阶配置示例

• 自动按需引入 Element Plus

六、总结

通过自动导入可实现：

• ✅ 减少 30% 以上的 import 语句
• ✅ 保持清晰的代码结构
• ✅ 自动维护类型声明
• ✅ 组件库真正按需加载

配置完成后，开发者可以专注于业务逻辑，享受丝滑的开发体验！