vue3 vite配置按需自动引入

最新推荐文章于 2025-11-13 10:39:35 发布

原创最新推荐文章于 2025-11-13 10:39:35 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vite项目中使用unplugin-auto-import和unplugin-vue-components插件实现按需自动导入API和组件，以及如何配置vite.config.ts以减少代码重复，提升开发效率。同时提到了与常规方法的区别和安装步骤。

按需自动引入

为了避免在多个页面重复引入 API 或组件，由此而产生的自动导入插件来节省重复代码和提高开发效率。

插件	说明	自动导入对象
unplugin-auto-import	按需自动导入API	ref，reactive,watch,computed 等API
unplugin-vue-components	按需自动导入组件	自动UI组件或者自定义组件

未使用和使用自动导入插件的区别：

插件名	未使用	使用
unplugin-auto-import
unplugin-vue-components

安装依赖

pnpm install unplugin-auto-import -D  //自动引入API
pnpm install unplugin-vue-components -D //自动引入组件
//同时安装
pnpm install -D unplugin-auto-import unplugin-vue-components

vite.config.ts - 自动导入配置

import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers' //antdesign

// pulgins下新增
// 自动引入
        AutoImport({
            imports: ['vue', 'vue-router']
        }),
        // 自动加载组件 默认自动注册src/components下的组件，可使用dts指定自动注册组件路径
        Components({
            resolvers: [
                AntDesignVueResolver({
                    importStyle: false, // css in js
                }),
            ],
            //dts:["src/components"]
        })

OK，大功告成！