在使用vue写h5的项目时，如何通过vite.config.js配置vant组件的按需导入（值得收藏）

前言：移动端项目使用的组件大多采用的是vant的组件（https://vant-ui.github.io/vant/#/zh-CN/release-note-v4），比较省事的直接全量导入组件，但是有时候要考虑到项目的大小，就要使用按需导入组件，这样也提高项目的运行速度。

vant的两种按需导入的方式

1. 根据文档介绍，进行按需导入步骤操作即可
2. 通过vite.config.js的配置，即可获得

项目使用的技术栈

vue3+vite+vant（4.9.0）+js

vant 组件按需导入方式一

1. npm 下载vant

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

2. 在main.js文件中引入

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

3. 在功能页面直接使用即可，后续再使用别的组件还需要再main.js引入，再app.use()挂载

vant组件按需引入的方式二

1. npm 下载对应的包（ “@vant/auto-import-resolver”: “^1.2.0”,
   “unplugin-auto-import”: “^0.17.6”,
   “unplugin-vue-components”: “^0.27.0”,
   ）放在package.json的devDependencies对象里 例如：npm i @vant/auto-import-resolver -D

2. 下载完成后，在vite.config.js引入

import { defineConfig,loadEnv } from 'vite'
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  defineConfig({
plugins: [
      vue(),
      AutoImport({
        resolvers: [VantResolver()],
      }),
      Components({
        resolvers: [VantResolver()],
      }),
    ],
    ...

})

3. 然后在功能页面直接使用需要的组件即可

结论：两种方式对比发现，方式二更为简单，在使用组件的时候，自动导入使用的组件，不用再繁琐的在mian.js里面手动按需导入，提升开发效率

完结