vue-loader@15.x VueLoaderPlugin 踩坑

在用 webpack 的时候，要处理分离出来的 .vue 文件，需要借助第三方的loader。

安装第三方loader

cnpm i vue-loader vue-template-compiler -D

一个解析以.vue后缀的文件，后边是解析template模板的。

在webpack的配置文件webpack.config.js中配置loader配置项

{
	test:/\.vue$/,
	use:'vue-loader'  //处理 .vue 文件的 loader
}

---

这个时候运行，发现还是报错，例如：

1. ReferenceError: VueLoaderPlugin is not defined
2. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

解决方案

遇到上边的错，不用慌，还缺少两个配置。因为在vue-loader@15.x 版本，有些东西必须要配置。

---

打开webpack的配置文件 webpack.config.js：

//这两个随便引入一个就行

const VueLoaderPlugin = require('vue-loader/lib/plugin');
或者
const { VueLoaderPlugin } = require('vue-loader');

然后还在此文件中配置 plugins 节点

plugins:[
	new VueLoaderPlugin()
]

---

解决方案2

//安装指定版本的loader，就不用配置以上内容
cnpm i vue-loader@14.1.1 vue-template-compiler@2.5.17 -D