当我们出现以下报错!

解决方案:

// 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. 计数排序之python

    话说,一口气不能吃个胖子, 一次性 学习 计数排序, 也确实容易消化不良. 下面,我们逐步学习下计数排序. 1.  已知一个简单列表 l1 = [5, 4, 3], 分析下这个列表的情况 5 > ...

  2. Docker 容器连接

    前面我们实现了通过网络端口类访问运行在 diocker 容器内的服务.下面我们来实现通过端口连接到了一个 dokcer 容器. 网络端口映射 我们创建一个python应用的容器. runoob@run ...

  3. 序列化还是JSON存储对象?

    2018-11-10 先对比一下存诸空间大小:https://pan.baidu.com/s/1I3K8ARfl4x8pC__B-T_vbA 输出的结果是 json: 序列化: 序列化Map: 用JS ...

  4. Vue实现跑马灯的效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. java中函数的参数传递

    转载  https://www.cnblogs.com/lixiaolun/p/4311863.html 转载https://www.cnblogs.com/wutianqi/p/8723582.ht ...

  6. 第二阶段第四次spring会议

    昨天我将对软件添加了初始页面. 今天我将对软件加上显示时间. try { SkinListBoxItem rt = new SkinListBoxItem(InputForm("请输入&qu ...

  7. SRILM的使用及平滑方法说明

    1.简介 SRILM是通过统计方法构建语言模型,主要应用于语音识别,文本标注和切分,以及机器翻译等. SRILM支持语言模型的训练和评测,通过训练数据得到语言模型,其中包括最大似然估计及相应的平滑算法 ...

  8. tp3

    入口文件:index.php目录结构:核心,Thinkphp 公共资源,public jq 上传的图片等 应用目录,application 房模块 common:基于模块的公共目录,公共函数命名:类: ...

  9. C++ openmp并行程序在多核linux上如何最大化使用cpu

    以上代码中,#pragma omp parallel for 这一行的作用即是调用openmp的功能,根据检测到的CPU核心数目,将for (i = 0; i < 1000000000; i++ ...

  10. Notes on Operating System