使用Vue Webpack模板启动项目时出现No parser错误求助

我之前也碰到过一模一样的问题！你是用了那个老的vue-webpack模板对吧？这个错误的根源是prettier版本和旧版vue-loader不兼容。

当时的报错信息和你完全一致：

Failed to compile with 2 errors 21:49:02 error in ./src/App.vue Module build failed: Error: No parser and no file path given, couldn't infer a parser. at normalize (path\node_modules\prettier\index.js:7051:13) at formatWithCursor (path\node_modules\prettier\index.js:10370:12) at path\node_modules\prettier\index.js:31115:15 at Object.format (path\node_modules\prettier\index.js:31134:12) at Object.module.exports (path\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:8080 webpack/hot/dev-server ./src/main.js error in ./src/components/HelloWorld.vue Module build failed: Error: No parser and no file path given, couldn't infer a parser. at normalize (path\node_modules\prettier\index.js:7051:13) at formatWithCursor (path\node_modules\prettier\index.js:10370:12) at path\node_modules\prettier\index.js:31115:15 at Object.format (path\node_modules\prettier\index.js:31134:12) at Object.module.exports (path\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

问题原因 #

老版的vue-webpack模板依赖的vue-loader版本比较旧，它调用prettier的时候没有明确指定parser参数。而现在npm默认安装的prettier是新版本，新版本的prettier要求必须指定parser或者通过文件路径自动推断，旧版vue-loader没做这个处理，就直接抛出了这个错误。

解决办法 #

给你两个可行的方案：

• 方案一：降级prettier到兼容版本（最简单）
  直接安装和旧版vue-loader兼容的prettier版本，比如1.18.2：

  npm install prettier@1.18.2 --save-dev
  

  安装完成后重新运行npm run dev，应该就能正常编译了。

• 方案二：修改vue-loader配置指定parser（适合不想降级的情况）
  找到项目里的webpack配置文件（一般是build/webpack.base.conf.js），在vue-loader的配置里添加prettier的parser设置：

  module.exports = {
    // ...其他配置
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              preserveWhitespace: true
            },
            prettier: {
              parser: 'vue'
            }
          }
        }
        // ...其他规则
      ]
    }
  }
  

  保存后重启开发服务即可。

另外提一句，那个vuejs-templates/webpack模板已经停止维护了，如果是新项目的话，建议改用官方的Vue CLI来创建项目，稳定性和兼容性都会好很多。

内容的提问来源于stack exchange，提问作者tobire