当我们出现以下报错!

解决方案:

// 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. 第一次面试经历(hr面)

    经过介绍,我有幸去到一家国际背景的广告公司面试前端开发实习生.收到的邮件是复试通知,看来我已经跳过了第一轮面试. 来到hr请我进了一个小间坐下里填求职书,里面有各种个人信息,有兴趣爱好,有工作经历,以 ...

  2. oracle的部分增删查改

    1. 创建表空间 create tablespace (demo)表名 logging datafile( 表空间存放的位置)  ‘D:\app\Administrator\oradata\orcl\ ...

  3. ubuntu 18.04输入法问题

    ubuntu 18.04输入法IBus出现问题.打字的弹窗只选择数字1对应的汉字,选择2,3,4,5等数字对应的汉字,就会出现问题. 例如下图只能选择1 不能选择2 3 4 5. 删除了~/.cach ...

  4. 最小化webpack项目

    先把代码贴出来,以后慢慢加说明 参考资料:入门 Webpack,看这篇就够了 / webpack 搭建自动打开,刷新浏览器 一.功能代码1.index.html <!DOCTYPE html&g ...

  5. 使用WinMerge作为git的Merge工具

    使用WinMerge作为git的Merge工具 我比较喜欢使用免费的WinMerge作为diff和merge工具,虽然TortoiseGit也自己带了TortoiseGitMerge工具,但是使用起来 ...

  6. java的多态性

    class test1{    int a=3;    public test1(int a)    {        this.a=a;    }    public void aa()    {  ...

  7. vue-cli 第一章

    一.安装 Node.Python.Git.Ruby 这些都不讲解了   二.安装 Vue-Cli    # 最新稳定版本 # 全局安装 npm install --global vue-cli # 创 ...

  8. ios 对于AFNetworking3.0的基本使用

    AFNetworking在3.0版本中删除了基于 NSURLConnection API的所有支持.AFHTTPRequestOperationManager已经抛弃,所以需要对数据请求进行改动. G ...

  9. C# ListView应用

    C#  ListView应用 1. 添加表头标题的方法 a. 直接在ListView控件上编写 b. 通过代码编写 //动态添加lstv_ReaderList列表头 /* lstv_ReaderLis ...

  10. 对 JSON 数据进行序列化和反序列化

    如何:对 JSON 数据进行序列化和反序列化 2017/03/30 作者 JSON(JavaScript 对象符号)是一种高效的数据编码格式,可用于在客户端浏览器和支持 AJAX 的 Web 服务之间 ...