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

像这样：

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

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

 

欢迎点赞！！点点关注~~