vue webpack 模板缺少解析器答案

【问题标题】：vue webpack template missing parservue webpack 模板缺少解析器
【发布时间】：2018-11-06 10:22:48
【问题描述】：

我刚刚使用 webpack 模板设置了一个 vue 项目，如下所述：http://vuejs-templates.github.io/webpack/

但是在运行 npm run dev 只是为了测试模板是否正常工作后，我收到了这个错误：

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)

我做错了什么？

【问题讨论】：

看起来我在问题上领先你一分钟：stackoverflow.com/questions/50555943/…
vue-cli好像有错误，可能降级了
我在使用 vue 和 webpack 时遇到了这个问题；我的项目中根本没有使用 vue-cli。它甚至没有安装。

标签： webpack vue.js prettier

【解决方案1】：

Prettier 在他们今天发生的1.13.0 更新中导致了这种回归。降级到以前的版本来修复这个错误：

npm install --save-dev prettier@1.12.0

npm 运行开发

这应该可以解决问题。

【讨论】：

使用 npm 非常适合我。谢谢！
现在删除 node_modules 和 package-lock.json 和 npm install 将修复它。
这对我有用！哇，对 1 个包的一次错误更新，整个项目都中断了。这就是 javascript 领域的当前状态

【解决方案2】：

由于vue-cli在这里使用了更漂亮的API接口并对选项进行硬编码，并且在@vue/component-compiler-utils项目中添加了更漂亮的依赖项。

您可以尝试npm i prettier@~1.12.0 在此处强制使用更漂亮的版本。

顺便说一句，有人做了pull request 的修复

【讨论】：

【解决方案3】：

我在使用 yarn 时遇到了同样的错误，但尝试了 npm i 和 npm run dev 并成功了。

yarn v v1.5.1 npm -v 5.6.0 node -v v10.0.0

【讨论】：

【解决方案4】：

如果您使用 Yarn，请将其添加到您的 package.json 以强制 @vue/component-compiler-utils 使用正确的版本：

"resolutions": {
  "@vue/component-compiler-utils/prettier": "1.12.1"
}

然后进行全新安装。

reference

【讨论】：

但是将 prettier 的版本更改为 1.12.0 对我有用。

【解决方案5】：

我在 Docker 上使用 Nuxt/Vue。我在使用 docker build 时遇到了同样的错误。

执行以下命令后不起作用

rm -rf node_modules 
npm install --save-dev prettier@1.12.0
npm run dev

所以我像这样编辑了 Dockerfile，它成功了。

FROM node:8.11

RUN mkdir -p /app
COPY . /app
WORKDIR /app

RUN npm install && npm cache verify
RUN npm install --save-dev prettier@1.12.0
RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "express"]

【讨论】：

【解决方案6】：

如果您使用的是laravel-mix，那么这会为我修复它：

删除 .\node_modules，删除 .\yarn.lock 然后将以下内容添加到 .\package.json

"dependencies": {
    ...
    "prettier": "1.12.1",
    "vue-loader": "13.7.0"
    ...
},
"resolutions": {
    "laravel-mix/vue-loader": "13.7.0",
    "vue-loader/prettier": "1.12.1"
}

运行纱线，一切都应该正常工作。

【讨论】：

【解决方案7】：

在 vue-loader@13.7.2 和 vue-loader@14.2.3 中修复。所以就升级吧。

【讨论】：