webpack使用vue-loader报错

新手学webpack，在使用vue-loader加载.vue文件时一直不成功
文件结构以及相关代码：

文件结构

相关代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
    <app></app>
    <script src="dist/build.js"></script>
</body>
</html>

app.vue

<script>
    import head from './components/head'

    export default {
        components: {
            head
        }
    }
</script>

<template>
    <h1>this is app.vue</h1>
    <head></head>>
</template>

<style>
/* 
    =reset.css
    @about: 初始化浏览器样式
 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,figcaption,figure,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{ font:14px/1 'Microsoft YaHei',"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif}
h1{font-size:18px;font-weight:normal}
h2{font-size:16px;font-weight:normal}
h3{font-size:14px;font-weight:normal}
h4,h5,h6{font-size:100%;font-weight:normal}
ul,ol,li{list-style:none}
a{text-decoration:none}
abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}
q:before,q:after{content:''}
legend{color:#000}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;height:1px}
img{max-width:100%;}

.fl{float:left;}
*{-ms-word-break:break-all;word-break:break-all;-ms-word-wrap:break-word;word-wrap:break-word;-webkit-tap-highlight-color:rgba(0,0,0,0)}
/* 
    =base
    @about: 页面结构性样式
 */
html, body{
    width: 100%;
    height: 100%;
    overflow:hidden;
}
</style>

head.vue

<script>
    export default {
        data(){
            return {
                msg: 'msg from head.vue'
            }
        }
    }
</script>

<template>
    <!-- head start -->
    <div class="head head-index">
        <h1>{{msg}}</h1>
        <div class="img-wrap">
            <img src="img/cjl.jpg" alt="">
        </div>
        <div class="date">2016-02-19<span class="dayOfWeek">(周五)</span></div>
        <div class="btn-group">
            <button class="day btn-date active">日</button><button class="week btn-date">周</button><button class="month btn-date">月</button>
        </div>
        <i class="btn-create create-task">+</i>
    </div>
    <!-- head end -->
</template>

main.js

    var Vue = require('vue');
    var App = require('./app.vue');
    new Vue({
        el: 'body',
        components: {
            App: App
        }
    })

webpack.config.js

var webpack = require('webpack');
module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test:/\.css$/,
                loader: 'style'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'vue-html'
            }
        ]
    }
}

相关的node_modules都已经安装了，报错信息如下：

ERROR in ./src/app.vue
Module build failed: TypeError: this._init is not a function
at Object.Vue (/home/user/workspace/my-project/node_modules/vue/dist/vue.common.js:9178:8)
@ ./src/main.js 3:10-30`

------------补充node_modules目录
（ps: 多余模块是运行别的代码时残留的，请忽略）

loader中配置的如下：

test: /\.vue$/,

也就是会找匹配.vue结尾的，但是你的

import head from './components/head'

试试

import head from './components/head.vue'

我没有用ES6，所以不是很确定。

别用 head 这个名字

你忘记了 html 已经有 head 了。:)

【热门文章】