求救,vue基于2.0的,但是.vue文件感觉vue-loader不解析

缓缓
  • 1.3k

webpack+vue组件开发

建立Vue组件
创建组件
项目目录结构

在src目录下建立components文件夹,并在其中建立app.vue文件

# 项目名称 vue-components-demo
vue-components-demo
└─webpack.config.js //配置文件
└─package.json
└─src               //文件入口
  └─components      //组件存放文件夹
    └─app.vue       //vue组件
  └─main.js         //主js文件
  └─index.html      //主html文件
└─node_modules      //项目的依赖所在的文件
└─dist              //webpack打包后生成的文件夹
  └─bundle.js
html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo!!</title>
</head>
<body>
<div id='div1'>
    <app></app>
</div>
<script src='../dist/app.bundle.js'></script>
</body>
</html>
编辑app.vue文件
<template>
    <div class="message">{{msg}}</div>
</template>
<script>
    export default {
        data () {
            return {
                msg: 'Hello from vue-loader'
            }
        }
    }
</script>
<style>
    .message{
        color: red;
        font-size: 36px;
        font-weight: blod;
    }
</style>
编辑main.js文件
import Vue from 'vue'
import App from './components/app.vue'

new Vue({
    el:'#div1',
    components: {App}
});
运行查看效果
$ webpack

这里报错

ERROR in ./src/components/app.vue
Module parse failed: E:MySoftwaretestGitwebpackvue-componets-demosrccomponentsapp.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

at Parser.pp$4.raise (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseTopLevel (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)

@ ./src/main.js 7:11-42

参考资料
回复
阅读 9.8k
3 个回答
✓ 已被采纳

You may need an appropriate loader to handle this file type.

你得配好 vue-loader 才行啊

直接用官方的脚手架工具吧

vue-loader是什么版本的呢?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏