vue3,vite,vant4，组件显示不出来，都是按照官方文档配置的？

Question

按需引入组件样式

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

现在在页面中使用 showToast 显示不出来，但是页面添加按钮元素什么的没问题，怎么改呢 ？

showToast('提示内容')

文档地址

Answer 1

这个文章可以解决我的问题

Answer 2

按照官方的步骤可以成功的，这是我尝试的包里的依赖版本：

"@vant/auto-import-resolver": "^1.2.1",
"unplugin-auto-import": "^0.18.3",
"unplugin-vue-components": "^0.27.4",

如果还不行：

1. 首先检查版本，如上。

2. 或者尝试一下从 unplugin-vue-components/resolvers 里引入VantResolver

   import { VantResolver } from 'unplugin-vue-components/resolvers';

3. 如果以上不行的话，手动引入函数组件

   • Vant 中有个别组件是以函数的形式提供的
   • 包括 Toast，Dialog，Notify 和 ImagePreview 组件。
   • 在使用函数组件时，无法自动引入对应的样式，可能需要手动引入样式。
   • 使用时手动引入函数组件

   例子：

   /** main.js 内容 */
   import './plugins/vant.js';
   
   ************分割线***************
   
   /** /plugins/vant.js 内容 */
   // Toast
   import { showToast } from 'vant';
   import 'vant/es/toast/style';
   
   // Dialog
   import { showDialog } from 'vant';
   import 'vant/es/dialog/style';
   
   // Notify
   import { showNotify } from 'vant';
   import 'vant/es/notify/style';
   
   // ImagePreview
   import { showImagePreview } from 'vant';
   import 'vant/es/image-preview/style';

Answer 3

少了配置，需要在resolve.extensions 中增加 '.mjs',

export default defineConfig({
 ...
  resolve: {
    extensions: ['.js', '.vue', '.mjs']
  },
...
})

因为vant的入口文件是 .mjs 后缀的。