高效前端开发：使用 unplugin-auto-import 实现依赖自动导入

unplugin-auto-import：为 Vite、Webpack、Rollup 设计的按需自动导入 API 的强大工具

🔍 开发痛点分析

在日常前端开发中，我们经常遇到以下困扰：

1. 重复导入常用模块 - 如 dayjs、lodash 等工具库
2. 频繁引用枚举值 - 相同的 enum 需要在多个文件中重复导入
3. 全局函数频繁导入 - 如 Element Plus 的 ElMessage、ElLoading 等组件
4. 冗余导入语句 - 复制粘贴代码导致的未使用引入，影响代码整洁度
5. 类型丢失问题 - 导入有时出现类型推导失败（理论上不应出现，但在实际开发中确实存在）

⚡ 问题根源

1. 模块化的双刃剑 - 模块化开发要求明确声明每一个依赖来源
2. 项目规模膨胀 - 随着需求迭代，组件和工具函数数量激增

💡 解决方案

采用 unplugin-auto-import 库实现按需自动导入所需 API。该方案可让项目全局感知使用位置，开发者只需直接使用相关函数和组件，无需手动导入。

🛠️ 实现步骤

1️⃣ 安装必要依赖

首先安装相关依赖包：

bash

体验AI代码助手

代码解读

复制代码

npm install dayjs lodash-es element-plus npm install unplugin-auto-import -D

2️⃣ 创建公共导出文件

创建一个独立的 TypeScript 文件作为中转导出（解决类型丢失问题，详细原因参考这里）：

typescript

体验AI代码助手

代码解读

复制代码

// @/utils/lib-export.ts import dayjs from "dayjs"; import { ElMessage, ElMessageBox, ElLoading, ElButton } from "element-plus"; import { keyBy, cloneDeep, isNil } from "lodash-es"; export { dayjs, ElMessage, ElMessageBox, ElLoading, ElButton, keyBy, cloneDeep, isNil };

3️⃣ 配置 Vite

在 vite.config.ts 中添加以下配置：

typescript

体验AI代码助手

代码解读

复制代码

AutoImport({ vueTemplate: true, // 注意：此选项必须开启，否则 .vue 模板中将检测不到自动导入（文档默认关闭） imports: [ "vue", "vue-router", { "@/utils/lib-export": [ ["dayjs"], ["ElMessage"], ["ElMessageBox"], ["ElLoading"], ["ElButton"], ["keyBy"], ["cloneDeep"], ["isNil"] ], }, ], }),

4️⃣ 更新 TypeScript 配置

将自动生成的类型声明文件添加到 TypeScript 配置中：auto-imports.d.ts

json

体验AI代码助手

代码解读

复制代码

// tsconfig.app.json { "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"] }

🧩 扩展应用：自定义枚举自动导入

同理，我们也可以将自定义的枚举或函数注入到全局。以枚举为例：

1️⃣ 定义全局枚举

typescript

体验AI代码助手

代码解读

复制代码

// @/enums/sex-enum.ts export enum SexEnum { Man, Woman, Unknown, }

2️⃣ 在 Vite 配置中添加

typescript

体验AI代码助手

代码解读

复制代码

imports: [ 'vue', 'vue-router', { '@/enums/sex-enum': [['SexEnum']], }, ],

📊 新旧方案对比

⚠️ 过去的方案

在没有 unplugin-auto-import 这个插件（由 Anthony Fu 开发）之前，Vue2 项目中通常采用以下方式：

• 将工具函数直接挂载到 Vue.prototype 上，通过 this 访问
• 手动挂载到全局 window 对象上

这些方式存在明显缺点：

• 需要手动编写 declare 声明文件
• 全局变量污染
• 不符合现代模块化开发理念

✅ 现在的方案

使用 unplugin-auto-import 后的优势：

• 代码简洁：符合现代标准，减少样板代码
• 开发体验佳：无需重复导入，专注业务逻辑
• 无污染：不会污染全局变量命名空间
• 类型完整：保持完整的 TypeScript 类型支持和智能提示

🎯 结语

这是一个简单但功能强大的配置方案，可以极大地提升前端开发体验和效率。它适用于各种规模的 Vue、React 或其他前端项目，你可以根据项目需求灵活调整需要自动导入的内容。

🚀 希望这个小技巧能帮助大家提高工作效率，早点下班，永不加班！

链接：https://juejin.cn/post/7503769523947044904