webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
当我们出现以下报错!

解决方案:
// 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的更多相关文章
- 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项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- webpack +vue开发(3)
webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...
- webpack +vue开发(2)
我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- webpack + vue最佳实践
webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...
- webpack vue 配置
vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.js ...
随机推荐
- 安装和使用JD-Eclipse插件
http://www.cnblogs.com/0616--ataozhijia/p/3924411.html http://aniyo.iteye.com/blog/1336622
- Django高级实战 开发企业级问答网站完整
资源获取链接点击这里 Django高级实战 开发企业级问答网站 从实际需求分析开始,实现当今主流知识问答应用的功能,包括动态.文章.问答.私信.消息通知.搜索.个人中心,打造企业级知识问答网站,由此全 ...
- easyui-combobox的option选项为true与false时的问题
如题,我们使用easyui-combobox,当我们的选择项为true与false时,即选择是否,后台返回一个boolean类型的变量,那么这时候,通过form表单进行反显会出现这样的问题:表单里ea ...
- 关于Hbuild引用mui常用代码块以及部分控件.
MUI-最接近原生APP体验的高性能前端框架, 追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征: MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K, ...
- Web性能和负载测试工具补充
压力测试文档:https://yq.aliyun.com/articles/377543https://www.cnblogs.com/ahjxxy/archive/2012/09/17/268899 ...
- Shell脚本备份数据库(多库)
#!/bin/bashPATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbinexport PATH#数据库用户名dbuser ...
- Java在ServletContextListener、过滤器、拦截器解决对象无法注入问题
1.通用方法: // 数据库日志操作对象 private LogInfoServiceIFC logInfoServiceProxy; @Override public void contextIni ...
- windows10系统安装Oralce11g时遇到INS-13001环境不满足最低要求
升级win10系统之后,需要重新安装Oracle,因为在安装Oralce11g时,使用64位的会出现各种不兼容问题,我每次安装都是使用32位的数据库. 在安装时点击setup.exe之后,出现了:[I ...
- 移动端H5页面禁止长按复制和去掉点击时高亮
/*设置IOS页面长按不可复制粘贴,但是IOS上出现input.textarea不能输入,因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callo ...
- Python开发——15.协程与I/O模型
一.协程(Coroutine) 1.知识背景 协程又称微线程,是一种用户态的轻量级线程.子程序,或者称为函数,在所有语言中都是层级调用,比如A调用B,B在执行过程中又调用了C,C执行完毕返回,B执行完 ...