npx create-nuxt-app 后跟 npm run dev 抛出 Vue 包版本不匹配

Question

我刚刚开始使用 Nuxt，所以我使用以下参数运行 npx create-nuxt-app my-app：

 Project name: client
 Programming language: JavaScript
 Package manager: Npm
 UI framework: Tailwind CSS
 Nuxt.js modules: Axios - Promise based HTTP client
 Linting tools: ESLint
 Testing framework: AVA
 Rendering mode: Universal (SSR / SSG)
 Deployment target: Server (Node.js hosting)
 Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
 Continuous integration: None
 Version control system: None

当我运行npm run dev 时，我得到了这个错误：

 ERROR  Failed to compile with 2 errors                                                                                                                 friendly-errors 07:48:10


 ERROR  in ./.nuxt/components/nuxt-error.vue                                                                                                            friendly-errors 07:48:10

Module Error (from ./node_modules/vue-loader/lib/index.js):                                                                                             friendly-errors 07:48:10


Vue packages version mismatch:

- vue@2.6.12
- vue-template-compiler@2.5.22

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

                                                                                                                                                        friendly-errors 07:48:10
 @ ./.nuxt/index.js 24:0-52 335:0-32
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
                                                                                                                                                        friendly-errors 07:48:10

 ERROR  in ./.nuxt/components/nuxt-error.vue                                                                                                            friendly-errors 07:48:10

Module build failed (from ./node_modules/vue-loader/lib/index.js):                                                                                      friendly-errors 07:48:10
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/path/my-app/node_modules/vue-loader/node_modules/@vue/component-compiler-utils/dist/parse.js:15:23)
    at Object.module.exports (/path/my-app/node_modules/vue-loader/lib/index.js:67:22)
                                                                                                                                                        friendly-errors 07:48:10
 @ ./.nuxt/index.js 24:0-52 335:0-32
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

这是我迄今为止尝试过的：

• npm audit fix --force
• npm clean cache --force
• 删除 package-lock.json、node_modules 和 npm install

编辑：

我已通过在我的包依赖项中包含以下内容来解决此问题：

"vue": "2.5.22",
"vue-server-renderer": "2.5.22",
"vue-template-compiler": "2.5.22"

现在我收到了警告：

Severity: high
Cross-Site Scripting - https://npmjs.com/advisories/1426
Remote Code Execution - https://npmjs.com/advisories/1548
fix available via `npm audit fix --force`
Will install vue-server-renderer@2.6.12, which is outside the stated dependency range
node_modules/vue-server-renderer/node_modules/serialize-javascript
  vue-server-renderer  2.3.0-beta.1 - 2.6.10
  Depends on vulnerable versions of serialize-javascript
  node_modules/vue-server-renderer

2 vulnerabilities (1 moderate, 1 high)
I can live with this warning, but it looks like the default Nuxt app creation isn't working, at least on my machine.

它有效，但它仍然感觉像是某种解决方法，我不确定我是否使用了这些软件包的正确版本。

我也尝试将它们全部升级，但没有奏效：

Found: vue-template-compiler@2.6.12
npm ERR! node_modules/vue-template-compiler
npm ERR!   vue-template-compiler@"2.6.12" from the root project
npm ERR!   peer vue-template-compiler@"^2.x" from @vue/test-utils@1.1.3
npm ERR!   node_modules/@vue/test-utils
npm ERR!     dev @vue/test-utils@"^1.1.3" from the root project
npm ERR!   3 more (@nuxt/components, @nuxt/vue-app, @nuxt/webpack)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue-template-compiler@"2.5.x" from require-extension-hooks-vue@3.0.0
npm ERR! node_modules/require-extension-hooks-vue
npm ERR!   dev require-extension-hooks-vue@"^3.0.0" from the root project
npm ERR!

如果有人有更好的建议，请告诉我！

Answer 1

看起来使用 yarn 而不是 NPM 可以解决这个问题。该问题似乎是由在 2.5.22 上具有 peerDependency 的 require-extension-hooks-vue 引起的。请参阅this issue 了解更多信息。