vue3+ts+vant4开发，配置自动引入组件，不再使用import引入

前言：

这是vant4官方推荐的按需引入方式，对于自动引入的描述，官方是这么说的：

相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。
如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。

虽然是这么说，但常规的使用import按需引入的方法也会出现一些样式引用问题，解决这些问题也不少费事，所以最后还是选择了自动引入的方式。

不得不说，使用自动引入之后，页面活组件中就可以直接使用组件，着实方便不少。

但还需要结合ts类型支持的配置，不然就算使用组件没问题，IDE中总是报方法不存在看着也挺烦的。

这里就详细介绍下相关的配置。

1. 安装插件：

# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

2. 配置插件:

基于 Vite 的项目，在 vite.config.js 文件中配置插件，官方的代码如下：

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()],
    }),
  ],
};

配置之后，的确是能用的，但是在使用选项式API组件的时候就会报异常“showLoadingToast is not defined”，所以还要对上边的代码进行扩展配置，让自动引入支持选项式API组件,代码如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import cnjmpostcsspxtoviewport from "cnjm-postcss-px-to-viewport";
import compressPlugin from "vite-plugin-compression";
// 引入自动导入插件
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    // 1. 自动导入 Vue 内置 API（ref、reactive 等）
    AutoImport({
      imports: ["vue"], // 自动导入 Vue 的核心 API
      // 新增：自动导入 Vant 函数式 API
      resolvers: [
        (name) => {
          // 匹配 Vant 函数式 API（如 showImagePreview、showToast 等）
          if (name.startsWith("show") || name.startsWith("close")) {
            return { from: "vant" };
          }
        },
      ],
    }),
    // 2. 自动导入 Vant 组件及样式
    Components({
      resolvers: [
        VantResolver({
          importStyle: false, // 禁用自动导入样式，必须配置，不然组件样式会错乱，如loading背景变成白色
        }),
      ],
      // 排除 node_modules 避免冗余处理
      exclude: [/[\\/]node_modules[\\/]/],
    })
  ]
});

如上配置，即可解决选项式API调用组件报不存在的错误，也能解决组件会存在样式错乱的异常问题。