企业官网建设流程全解析

Vant 在 Vite 项目中如何用 @vant/auto-import-resolver 配置按需引入组件与样式？

【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant

在基于 Vite 的 Vue 3 项目中使用 Vant 时，常规写法需要手动import { Button } from 'vant'并引入vant/lib/index.css全量样式。如果你希望 JS 和 CSS 都按实际使用的组件来打包，可以用 Vant 官方基于unplugin-vue-components提供的解析器@vant/auto-import-resolver，让模板中用到的组件和函数 API（如showToast）被自动导入，并自动引入对应组件的 CSS 样式。本文按 快速上手 文档中的步骤完成安装、配置和使用。

前提条件

• 一个已有的 Vite + Vue 3 项目。Vant 通过npm i vant安装的是最新版（Vant 4）；Vue 2 项目应安装vant@latest-v2，不在本文范围内。
• 文档说明：Vant 默认支持 Tree Shaking，不配置任何插件时即可移除不需要的 JS 代码，但 CSS 无法通过 Tree Shaking 优化。按需引入的价值主要体现在减少 CSS 体积；文档同时提示这种方式使用起来会更繁琐一些，如果业务对 CSS 体积要求不是特别极致，更推荐简便的常规用法。

1. 安装 Vant 与插件

在项目中先安装 Vant 本体，再安装按需引入所需的两个插件和解析器（安装为开发依赖）：

# Vue 3 项目，安装最新版 Vant npm i vant # 安装按需引入所需的插件（也可以换用 yarn add / pnpm add / bun add） npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

2. 在 vite.config.js 中配置插件

按 快速上手 文档，Vite 项目在vite.config.js中同时配置AutoImport和Components两个插件，并都传入VantResolver()作为解析器：

import vue from '@vitejs/plugin-vue'; import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; export default { plugins: [ vue(), AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], };

两个插件分工不同：unplugin-vue-components（Components）负责解析模板并自动注册对应组件；@vant/auto-import-resolver负责自动引入组件对应的样式；unplugin-auto-import（AutoImport）负责自动导入 Vant 的函数 API 及其样式。

3. 使用组件和函数 API

配置完成后不需要再手动写import：

模板中直接使用组件标签，unplugin-vue-components会解析模板并自动注册：

<template> <van-button type="primary" /> </template>

脚本中直接调用函数 API，unplugin-auto-import会自动导入对应的 Vant API 以及样式（以下showToast用法来自文档示例）：

<script> showToast('No need to import showToast'); </script>

验证方式就是这两处能否不手动import直接工作：组件正常渲染且带样式、showToast正常弹出，说明自动导入链路已生效。

可配置的选项

VantResolver()支持传入选项，完整说明见 README：

• importStyle（Type:boolean，Default:true）：是否自动引用组件对应的样式。设为false可禁用样式引用：

Components({ resolvers: [ VantResolver({ // 禁用样式引用 importStyle: false, }), ], });

• module（Type:'esm' | 'cjs'，Default:'esm'）：设置引用的模块类型：

Components({ resolvers: [ VantResolver({ module: 'cjs', }), ], });

• ssr（Default:undefined）：此选项已废弃，请使用module选项来设置模块类型。
• exclude（Type:string[]，Default:[]）：设置不自动引入的组件或 API。组件名用于Components场景，API 名用于AutoImport场景：

Components({ resolvers: [ VantResolver({ exclude: ['Button'], }), ], });

AutoImport({ resolvers: [ VantResolver({ exclude: ['showToast'], }), ], });

使用限制与问题反馈

文档给出的使用提示：

• 避免同时使用「全量引入」和「按需引入」两种方式，否则会导致代码重复、样式错乱等问题。
• 如果遇到组件不能导入的问题，由于unplugin-vue-components并不是 Vant 官方维护的插件，文档建议到unplugin/unplugin-vue-components仓库反馈；如果是样式不生效的问题，可以在 Vant 仓库下反馈。

另外，快速上手 文档还说明：从 Vant 4.0 版本开始不再支持babel-plugin-import，从旧版本迁移过来的项目需要删除babel.config.js中针对 vant 的import插件配置，改为本文的按需引入方式。

【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant