vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
场景:
. webpack2.4.*集成vue-loader@15.7.2报错

原因:
参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
解决方法:
在webpack.config.js中加入如下:
var path=require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
// 配置入口
entry:{
main:'./main'
},
// 配置出口
output:{
// path用来存放打包后的文件输出目录,必填
path:path.join(__dirname,'./dist'),
// publicPath指定资源文件引用的目录
publicPath:'/dist/',
// filename用于指定输出文件的名称
filename:'main.js'
},
// 配置Loader,增加对.css文件的处理
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'vue-style-loader'
})
}
}
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
},
// 以下是使用插件后的loader配置
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},
plugins:[
// 重命名提取后的css文件
new ExtractTextPlugin("main.css"),
new VueLoaderPlugin()
]
};
module.exports=config;
部分转载自:https://blog.csdn.net/cominglately/article/details/80555210
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin的更多相关文章
- vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
默认,webpack无法打包.vue文件,需要安装 相关的loader: cnpm i vue-loader vue-template-compiler -D 提示以下错误信息: Module Err ...
- webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
当我们出现以下报错! 解决方案: // webpack配置文件 const path = require('path'); const htmlWebpackPlugin = require('htm ...
- Vue Loader
介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- babel 7.x 和 webpack 4.x 配置vue项目
很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- webpack4 + vue + vue-router + vuex
ps: 所有案例使用的 node 及 npm 版本如下 node版本: v8.4.0 npm: 5.3.0 下一个案例默认是接着上一个继续写的 建议先熟悉以下文档 vue vue-router vue ...
随机推荐
- [Usaco2007 Jan]Telephone Lines架设电话线(最短路,二分)
[Usaco2007 Jan]Telephone Lines架设电话线 Description FarmerJohn打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向 ...
- CF671D Roads in Yusland
一道很玄妙的题= = 我们考虑先考虑DP 那么有$f[x]=min(c+\sum f[y])$ $f[x]$表示覆盖x的子树和x->fa[x]的所有边最小代价 我们枚举一条边c覆盖的x-> ...
- Spring的AOP和IoC及隔离级别
Spring的AOP和IoC Spring AOP:代理机制.Spring提供的自动代理机制 Spring的IoC来实组件之间的依赖关系注入, 使控制层与业务实现分离,即客户通过调用业务委托接口来调用 ...
- 洛谷 P1407 稳定婚姻
问题描述 我国的离婚率连续7年上升,今年的头两季,平均每天有近5000对夫妇离婚,大城市的离婚率上升最快,有研究婚姻问题的专家认为,是与简化离婚手续有关.25岁的姗姗和男友谈恋爱半年就结婚,结婚不到两 ...
- 【面试题】JavaScript
第一题 合并 const a = { name: "zhangsan", age: 22 } const b = { name: "lisi", age: 55 ...
- ### Error updating database. Cause: com.microsoft.sqlserver.jdbc.SQLServerException: 必须声明标量变量 "@P23@P24"。(sql少一个逗号)【??】
(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,[??],?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?, ...
- 浅谈MySQL优化
本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作,至于具体的SQL优化,大部分通过加适当的索引即可达到效果,更复杂的就需要具体 ...
- php随机数原理
php随机数原理: 系统自动生成一个随机数种子(mt_srand函数可以自己生成种子),mt_rand先判断是否有生成种子,没有就自动生成一个,然后根据种子生成随机数. 生成10000-99999随机 ...
- [Ctsc2015]misc
https://lydsy.com/JudgeOnline/problem.php?id=4055 题解 观察题目要我们求的东西: \[ ans[k]=\sum_{i}\sum_j \frac{a_i ...
- celery的入门使用
一.安装步骤 二.使用方法 三.和Django结合 四.部署和监控