解决vue3安装vant报错:ERROR TypeError: ComponentsPlugin is not a function

2024-06-25   阅读:684   类型:前端   分类:Vue    标签: Vue Vant

一、问题复现

vue-cli 的项目中按需扩展使用unplugin-vue-components,运行报错:

ERROR TypeError: ComponentsPlugin is not a function

TypeError: ComponentsPlugin is not a function

at Object.<anonymous> (F:\study\vue\vue3-waimai\vue.config.js:27:11)

at Module._compile (node:internal/modules/cjs/loader:1198:14)

at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)

at Module.load (node:internal/modules/cjs/loader:1076:32)

at Function.Module._load (node:internal/modules/cjs/loader:911:12)

at Module.require (node:internal/modules/cjs/loader:1100:19)

at require (node:internal/modules/cjs/helpers:119:18)

at exports.loadModule (F:\study\vue\vue3-waimai\node_modules\@vue\cli-shared-utils\lib\module.js:79:14)

at Service.loadUserOptions (F-:\study\vue\vue3-waimai\node_modules\@vue\cli-service\lib\Service.js:330:22)

at Service.init (F:\study\vue\vue3-waimai\node_modules\@vue\cli-service\lib\Service.js:70:30)

vue.config.js文件配置

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports={
  configureWebpack: {
    plugins: [
     ComponentsPlugin({
      resolvers: [VantResolver()],
     }),
    ],
   },
}

二、问题原因

1、components的版本号小于0.26.0使用

module.exports={
  configureWebpack: {
    plugins: [
     ComponentsPlugin({
      resolvers: [VantResolver()],
     }),
    ],
   },
}

2、大于等于0.26.0使用

module.exports={
  configureWebpack: {
    plugins: [
     ComponentsPlugin.default({
      resolvers: [VantResolver()],
     }),
    ],
   },
}

三、问题解决

看了下根目录的package.json中的版本"unplugin-vue-components": "^0.27.0",所以改为如下引入即可解决

module.exports={
  configureWebpack: {
    plugins: [
     ComponentsPlugin.default({
      resolvers: [VantResolver()],
     }),
    ],
   },
}
腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/1078.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×