在用 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
}
这个时候运行,发现还是报错,例如:
- ReferenceError: VueLoaderPlugin is not defined
- 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