Vant4：自动导入样式无效问题

今天前端小伙伴使用了Vant4，发现了一个奇怪的问题：按照Vant官方文档，按需引入组件样式（Vite 的项目）：

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

3. 使用组件和 API

完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。

<script setup>
showToast('test')
</script>

如果完全按照上述步骤操作应该是没有问题的，但一不小心没留意到原先已经有手动导入vant的习惯，比如：

<script setup>
import { showToast } from 'vant'
showToast('test')
</script>

结果会发现，无法正常显示toast消息。关于这个问题在Vant的github上有相关的问题：https://github.com/youzan/vant/issues/12709。

上面的示例还算是比较好排查和理解的，但项目的实际的代码复杂一些，可能会令人匪夷所思。比如：

// login.vue

<script setup>
import { showToast } from 'vant'
import AuthApi from 'api/auth'

showToast('test')
</script>

// api/auth.js
import request from 'utils/request'
export default class AuthApi {
  static getCode (data) {
    return request.post('/login', data)
  }
  ...
}

// utils/request.js
import axios from 'axios'
import { getToken, goLogin } from 'utils/auth'

service.interceptors.response.use(response => {
	const res = response.data
    const { errCode, errMsg } = res
    if (errCode === 40001) {
    	showToast(errMsg)
    }
    ...
})

在上述的login页面，显示的导入了showToast ：import { showToast } from 'vant'，但页面仍能正常显示toast:

这是因为导入的utils/request.js中没有显示导入showToast，因此能触发自动样式导入，所以直观感觉像是login页面手动导入showToast却还能正常显示toast。如果在utils/request.js中再显示导入showToast，那么toast便无法正常显示。

因此，在使用Vant4按需引入组件样式时，统一不要手动导入组件。