场景:

. 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的更多相关文章

  1. 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 ...

  2. webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

    当我们出现以下报错! 解决方案: // webpack配置文件 const path = require('path'); const htmlWebpackPlugin = require('htm ...

  3. Vue Loader

    介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...

  4. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  5. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  6. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  7. babel 7.x 和 webpack 4.x 配置vue项目

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...

  8. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  9. webpack4 + vue + vue-router + vuex

    ps: 所有案例使用的 node 及 npm 版本如下 node版本: v8.4.0 npm: 5.3.0 下一个案例默认是接着上一个继续写的 建议先熟悉以下文档 vue vue-router vue ...

随机推荐

  1. robotframework关键字

    *** Settings ***Library Selenium2Library *** Keywords ***Checkbox应该不被选择 [Arguments] ${locator} Check ...

  2. 破坏双亲委托机制的一些情况---Tomcat和JDBC,破坏后的安全问题

    采用双亲委托机制的原因 类加载器就是将字节码搬进jvm方法区的组件.我们知道,JVM识别加载进来的类是通过类加载器+类全名完成的,也就是说同一个类由不同类加载器加载进去的话就会被视为不同的类.jdk提 ...

  3. 用C语言编程乘法口诀表

    首先是全部,代码如下: #include<stdio.h> void main() { int i,j; ;i<=;i++) { ;j<=;j++) printf(" ...

  4. Axios 安卓4.4不兼容的问题

    问题:Vue在使用Axios做接口请求时,如果是安卓4.4系统会发生报错,原因是安卓4.4不支持ES6的Promise语法 解决方案: 1.安装: npm install babel-polyfill ...

  5. 暴力&打表

    _LH巨神好像不太会打表,这里来普及一下 还有暴力这么重要的东西网上讲的人竟然不多…… 一.打表 打表,就是针对一些输入数据比较小的题目的一种骗分技巧,当然有时候也可以在正解或暴力中起一定优化作用. ...

  6. FastDFS整合普通Maven项目(四)

    1.下载官方的源代码:https://codeload.github.com/happyfish100/fastdfs-client-java/zip/master 2.采用maven命令编译成jar ...

  7. 【HDOJ6616】Divide the Stones(构造)

    题意:给定n堆石子,第i堆的个数为i,要求构造出一种方案将其分成k堆,使得这k堆每堆数量之和相等且堆数相等 保证k是n的一个约数 n<=1e5 思路:先把非法的情况判掉 n/k为偶数的方法及其简 ...

  8. AT3576 E Popping Balls——计数思路

    题目:https://code-festival-2017-qualb.contest.atcoder.jp/tasks/code_festival_2017_qualb_e 题解:https://w ...

  9. 连接超时(connect timed out)和读取超时(Read timed out)

    设置连接超时和读取超时方法: RequestConfig config=RequestConfig.custom() .setConnectTimeout(10000) // 设置连接超时时间 10秒 ...

  10. brdd 惰性执行 mapreduce 提取指定类型值 WebUi 作业信息 全局临时视图 pyspark scala spark 安装

    [rdd 惰性执行] 为了提高计算效率 spark 采用了哪些机制 1-rdd 基于分布式内存数据集进行运算 2-lazy evaluation  :惰性执行,即rdd的变换操作并不是在运行该代码时立 ...