webpack-vant-按需导入报错-ComponentsPlugin-is-not-a-function

背景

使用 Vant+vue-cli的学习项目中,
想使用 unplugin-vue-components,实现按需导入,报错 TypeError: ComponentsPlugin is not a function

解决方案

官方文档已经说明了，官方文档
相关 issue, 文档 unplugin-vue-components@0.26.0 引用方式有误 #12499

const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      //   请注意你项目 unplugin-vue-components 的版本，如果大于等于 0.26.0 你需要注释第一行，反之，则相反
      // 当 unplugin-vue-components 版本小于 0.26.0 时，使用以下写法
      ComponentsPlugin({ resolvers: [VantResolver()] }),
      //当 unplugin-vue-components 版本大于等于 0.26.0 时，使用以下写法
      ComponentsPlugin.default({ resolvers: [VantResolver()] }),
    ],
  },
};

请注意你项目 unplugin-vue-components 的版本，如果大于等于 0.26.0 你需要注释第一行，反之，则相反