摆脱手动依赖引入，自动引入依赖
刀刀
0字
0分钟
2026/8/16
学习目标
unplugin-vue-components和unplugin-auto-import基本使用- 运用
unplugin-vue-components和unplugin-auto-import自动引入各类内容
基本使用
unplugin-auto-import
项目中的 JavaScript 模块可用 unplugin-auto-import 自动引入。
- 项目本地编写的工具方法自动引入
- 第三方库的自动引入
在 vite.config.js 文件中引入并配置插件。
js
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
// auto-import内置vue、vue-router、react这些常见基本库的引入规则
'vue',
],
}),
],
})插件内置了 Vue 的规则，可直接使用。后续文件中无需手动引入 ref 等模块。
若要使用自己封装的函数方法，需做如下配置：
js
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
// auto-import内置vue、vue-router、react这些常见基本库的引入规则
'vue',
],
// 配置那些本地目录，支持自动引入
dirs: ['./src/utils/**'],
}),
],
})若要自动引入第三方库如 axios、lodash 等（无内置支持），需自行编写规则。
js
import AutoImport from 'unplugin-auto-components/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
'vue',
{
// 放自定义的自动引入库
loadsh: [
// 哪些方法能自动引入
'concat',
],
},
],
// 配置那些本地目录，支持自动引入
dirs: ['./src/utils/**'],
}),
],
})上方配置本质上是通过 import {concat} from 'lodash' 引入的，因此可设置别名。
js
import AutoImport from 'unplugin-auto-components/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
{
// 放自定义的自动引入库
lodash: [
// 哪些方法能自动引入
'concat',
['compact', 'cp'],
],
},
],
}),
],
})这样修改后即设置别名，本质上是 import {compact as cp} from 'lodash'。
像 axios 这种全部导入默认部分的，实际导入的是 default，可通过设置别名自动引入。
js
import AutoImport from 'unplugin-auto-components/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
{
// 放自定义的自动引入库
lodash: [
// 哪些方法能自动引入
'concat',
['compact', 'cp'],
],
axios: [['default', 'axios']],
},
],
}),
],
})最终编译效果等价于 import axios from 'axios'。
unplugin-vue-components
Vue 项目组件虽可用unplugin-auto-import 自动引入，但许多 Vue 组件以 .vue 文件编写，unplugin-auto-import 无法处理，因此有专门的 unplugin-vue-components。而 React 纯为 JavaScript，可直接使用 unplugin-auto-import。- 自动引入本地组件
- 自主开发的组件库如何支持自动引入
同样需要在 vite.config.js 中配置，以 element-plus 为例。
js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
// 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
resolvers: [ElementPlusResolver()],
}),
],
})本地组件要实现自动引入，与 unplugin-auto-import 类似，通过 dirs 配置。
js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
// 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
resolvers: [ElementPlusResolver()],
// 存放组件的文件夹
dirs: ['./src/components'],
}),
],
})若要自定义 resolver 支持自主开发的组件库，需配置一个方法，接收组件名称。判断名称是否属于自主开发组件（有固定命名），符合条件则 return 一个对象。该对象主要属性为：
name：组件名称from：来源文件夹路径style：样式文件路径
js
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
// 便携组件库的自动引入规则。内置了主流的组件，如element、antd、vant等
resolvers: [
ElementPlusResolver(),
(componentName) => {
if (componentName.indexOf('My') != -1) {
// 引入规则
return {
name: componentName,
from: 'myui',
sideEffects: 'myui/' + componentName + '/style/index.css',
}
}
},
],
// 存放组件的文件夹
dirs: ['./src/components'],
}),
],
})后续编译后等价于引入组件和样式文件。
js
import { MyButton } from 'myui'
import 'myui/MyButton/style/index.css'拓展
若要了解如何开发自己的组件库，指路跳转：组件库搭建 。
贡献者
v_duyilin
duyidao 刀刀
平安喜乐