一、问题复现
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()],
}),
],
},
}
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）