webpack中引入vue组件(.vue文件)时打包报错的解决办法

时间:2024-03-22 18:58:58

如图的错误:

webpack中引入vue组件(.vue文件)时打包报错的解决办法

一片红,但是要仔细看出现了什么错误,其中 vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 这一句很关键!!

错误中提示缺少了一个插件,webpack config 中缺少名为 VueLoaderPlugin 的插件,意思就是 webpack的配置文件 webpack.config.js 中缺少了 VueLoaderPlugin 插件,因此只需要添加这个插件就可以了。

在添加之先引入插件:const VueLoaderPlugin = require("vue-loader/lib/plugin");

然后在 plugins 里创建一个新的插件:plugins:[ new VueLoaderPlugin(); ]

像这样:

webpack中引入vue组件(.vue文件)时打包报错的解决办法

之后你再打包,基本就没有问题了,如果说还有问题,就看看是什么问题,例如是 You may need an appropriate loader to handle this file type. 的问题,你要看看你的 引入 vue-loader 没有,如果没有,就引入:{ test:/\.vue$/, use:"vue-loader" }

webpack中引入vue组件(.vue文件)时打包报错的解决办法

这样基本就能解决问题了!!

 

欢迎点赞!!点点关注~~