Vue使用webpack:No parser and no file path given, couldn't infer a parser.

使用vue-cli搭建基于webpack的vue应用报错:

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (myproject\node_modules\prettier\index.js:7051:13)
at formatWithCursor (myproject\node_modules\prettier\index.js:10370:12)
at path\node_modules\prettier\index.js:31115:15
at Object.format (myproject\node_modules\prettier\index.js:31134:12)
at Object.module.exports (myproject\node_modules\vue-loader\lib\template-compiler\index.js:80:23)
@ ./src/App.vue 11:0-354
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server ./src/main.js

由错误可以看出,问题出在prettier。prettier版本为1.3.0。

原因:

vue-loader使用prettier,如下:

code = prettier.format(code, { semi: false })

vue-loader没有指定parser,使用prettier提供的默认parser。而prettier 1.3.0移除了使用默认的parser来解析文件,这样就导致了No parser的错误。

解决方法:

方法一:

在package.json强制设置prettier的版本,降低为prettier1.12.1:

npm install --save-dev prettier@1.12.1
npm run dev

方法二:

vue-loader@13.7.2 和vue-loader@14.2.3是已经修复了,等待发布新版可以解决,修复内容如下:

code = prettier.format(code, { semi: false, parser: 'babylon' })

指定了parser为babylon。

参考:


版权声明:著作权归作者所有。

相关推荐

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

Vue实例里this的使用

要理解Vue实例里this的使用,首先要理解this在JavaScript里的用法,可以参考理解JavaScript普通函数以及箭头函数里使用的this。这是vue文档里的原话:All lifecycle hooks are called with their 'this' context pointing 

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil