在用 webpack 的时候,要处理分离出来的 .vue 文件,需要借助第三方的loader。
安装第三方loader
npm i vue-loader vue-template-compiler -D
在webpack的配置文件中配置loader配置项
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader",
sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
}
}
},
这时候运行报错
这个时候运行,发现还是报错,例如:
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");
然后还在此文件中配置 plugins 节点
plugins: [new VueLoaderPlugin()],
完事!
网友评论