vue.js - 求救，vue基于2.0的，但是.vue文件感觉vue-loader不解析
本文介绍了vue.js - 求救，vue基于2.0的，但是.vue文件感觉vue-loader不解析的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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
参考资料
解决方案
You may need an appropriate loader to handle this file type.
你得配好 vue-loader 才行啊
这篇关于vue.js - 求救，vue基于2.0的，但是.vue文件感觉vue-loader不解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
