当我们出现以下报错!

解决方案:

// webpack配置文件 

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行

module.exports = {
mode:'none',
entry:'./src/main.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
}),
new VueLoaderPlugin() //new一个实例
],
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.(jpg|png|bmp|gif|jpeg)$/,use:'url-loader'},
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
{test:/\.vue$/,use:'vue-loader'}
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
}
}

webpack 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项目之初体验

    在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...

  3. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  4. webpack +vue开发(3)

    webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...

  5. webpack +vue开发(2)

    我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...

  6. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  7. gulp+webpack+vue

    gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...

  8. webpack + vue最佳实践

    webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...

  9. webpack vue 配置

    vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...

随机推荐

  1. Hello The Merciless World!

    这里是一名FJ蒟蒻OIer的Blog,ID在上面自己不会看嘛QAQQQ是GldHkkowo(很随性的名字w 联系方式:QQ:735900335 加 Q Q 看 蒟 蒻 WA 题 爱好? 死宅的爱好是什 ...

  2. Google资深工程师深度讲解Go语言完整教程

    资源获取链接点击这里 欢迎大家来到深度讲解Go语言的课堂.本课程将从基本语法讲起,逐渐深入,帮助同学深度理解Go语言面向接口,函数式编程,错误处理,测试,并行计算等元素,并带领大家实现一个分布式爬虫的 ...

  3. 用turtle库实现汉诺塔问题~~~~~

    汉诺塔问题 问题描述和背景: 汉诺塔是学习"递归"的经典入门案例,该案例来源于真实故事.‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬ ...

  4. 解决拼音输入法会触发input事件的问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  5. AtCoder Regular Contest 090

    C - Candies 链接:https://arc090.contest.atcoder.jp/tasks/arc090_a 题意:从左上角走到右下角,只能向右和向下走,问能最多能拿多少糖果. 思路 ...

  6. 图解HTTP第三章

    HTTP 报文内的 HTTP信息 用于 HTTP 协议交互的信息被称为 HTTP 报文.HTTP 报文本身是由多行(用 CR+LF 作换行符)数据构成的字符串文本. HTTP 报文大致可以分为两类:请 ...

  7. 关于canvas补充说明

    上篇文章提到的canvas画布,用到f2组件,组件地址https://gw.alipayobjects.com/os/antv/assets/f2/3.0.0/f2.js或利用npm下载:npm in ...

  8. 小白的CTF学习之路5——内存的逻辑结构

    很衰的一天,各种意料之外的问题,但都挡不住我每日一更的步伐 内存的逻辑结构大致分为以下几种: 数组 栈与队列 链表 二叉树 以上,数组,栈,链表是我这章要说明的 在学习前需要了解的两个问题: 1.内存 ...

  9. 2019.03.11 bzoj4813: [Cqoi2017]小Q的棋盘(贪心)

    传送门 考虑最后所有走过的点构成的树,显然除了最长链走一遍以外每条轻链都走两遍. 于是求一波最长链搞一搞就完了. 注意几个小细节特判qwq 代码: #include<bits/stdc++.h& ...

  10. http跳转https

    参考:http://www.cnblogs.com/tielemao/p/6386362.html webconfig中增加: <configuration> <system.web ...