如何修复 Laravel Spark v4.0.9 上的 "Vue packages version mismatch" 错误？

Question

当我运行 npm run dev 在 Laravel Spark v4.0.9 应用程序上时，出现以下错误：

Module build failed: Error:

Vue packages version mismatch:

- vue@2.0.8
- vue-template-compiler@2.2.6

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.

我的 package.json 看起来像这样：

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "axios": "^0.15.2",
    "bootstrap": "^3.0.0",
    "cross-env": "^3.2.3",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "laravel-mix": "0.*",
    "moment": "^2.10.6",
    "promise": "^7.1.1",
    "sweetalert": "^1.1.3",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "vue": "~2.0.1",
    "vue-resource": "^1.2.0",
    "vue-router": "^2.2.1",
    "vue-truncate-filter": "^1.1.6",
    "vuejs-datepicker": "^0.6.2"
  },
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^1.1.4"
  }
}

我试过以下（在不同的时间，不按顺序）：

已删除 node_modules 和 npm install
只尝试了运行宁 yarn 和 yarn upgrade
删除 vue-loader 并重新安装
指定 vue 和 vue-template-compiler 的确切版本，而不是让 npm 安装或 yarn 找出依赖关系
删除其他非必需的包（vue-router、vue-t运行cate-filter、vuejs-datepicker）并再次尝试以上所有操作
用头撞墙

Answer 1

这对我有用：

修改package.json:

“vue”: “^2.0.8",
“vue-template-compiler”: “^2.1.8"

删除node_modules
运行 npm install

Answer 2

检查 vue 的依赖关系并替换为 vue-template-compiler 的确切开发依赖关系。

例如

"dependencies": {
    "vue": "^2.5.2",
},
"devDependencies": {
    "vue-template-compiler": "^2.5.3",
},

应替换为：

"dependencies": {
    "vue": "2.5.2",
},
"devDependencies": {
    "vue-template-compiler": "2.5.2",
},

然后运行又是npm install。

Answer 3

这对我有用：

修改package.json： "vue": "^2.5.2" 到 "vue": "2.5.*"
删除文件夹node_modules
删除包-lock.json
运行 npm 安装

Answer 4

这里vue模板编译器编译vue模板。如果你用一个版本的vue，用另一个版本的vue-template-compiler，那就有问题了。

运行这个命令

npm update vue-template-compiler

这将解决这个问题，它会安装一个与 vue js 版本相同版本的 vue 模板编译器。

Answer 5

运行下面的命令帮助了我

npm install vue-template-compiler@2.5.16 --save-dev

注意。将版本号替换为您需要的正确版本。在我的例子中，vue 的版本是 2.5.16，vue-template-compiler 是 2.5.13 因此我将 vue-template-compiler 更新为 vue 的版本。

希望这对某人有所帮助

Vue packages version mismatch error fix

Answer 6

对于 vue ^2.5.17.

在你的package.json

只需将此添加到 devDependencies 或更新 vue-template-compiler 的版本：

"vue-template-compiler": "^2.5.17"

您将得到以下输出：

"devDependencies": {
  ...
  "lodash": "^4.17.4",
  "popper.js": "^1.14.4",
  "vue": "^2.5.17", // <= note the version
  "vue-template-compiler": "^2.5.17" // <= note the version
},

之后，运行：

npm install

Npm 将只更新更新的包。

Answer 7

您不需要删除 node_modules 文件夹。

- vue@2.0.8 - vue-template-compiler@2.2.6

用较低的版本号更新包。在这种情况下，npm update vue。或者，您可能也想 npm update vue-loader

Answer 8

不需要删除所有 node_modules 文件夹。只需通过 @latest 标志更新包：vue、vue-template-compiler 和 vue-server-renderer，它应该有助于任何 vue 包版本不匹配的情况。

npm i vue-template-compiler@latest --save

npm i vue-server-renderer@latest --save

--save 将自动更新您的 package.json 文件中的版本。 @latest 表示安装最新可用版本的软件包。如果您需要更新 vue，请按照我们在上面的示例中所做的相同方式进行操作。

此外，您始终可以通过以下命令检查新版本的更新：npm outdated。它显示了所有应该更新的包列表。

顺便说一下，npm update命令只更新minor和patches版本，但是当你想更新的时候就没用了主要版本。例如npm update不会更新2.4.5=>3.0.1，但是可以更新

Answer 9

从接受的答案中，无需删除 node_modules 文件夹和运行再次 yarn install，您可以直接升级这 2 个包:

yarn upgrade vue@^2.0.8
yarn upgrade vue-template-compiler@^2.1.8

Answer 10

试试这个：npm install vue-template-compiler@2.0.8 --save-dev

将 vue-template-compiler 版本转换为与 vue 版本相同的版本（对于本例 2.0.8）对我有用。试一试。

Answer 11

我用过 npm install vue --save 并且对我有用

Answer 12

更新 Vue 是我的解决方案。

npm i vue@latest --save

想提一下，我之前执行了回答中描述的步骤：

npm i vue-template-compiler@latest --save

npm i vue-server-renderer@latest --save

更新 Vue 后它就起作用了。

Answer 13

[已解决！！]

我去了抱怨的 vue-template-compiler 的同一个 package.json 文件，更改了那里的包版本和运行纱线，像这样：

_~/.config/yarn/global/node_modules/vue-jscodeshift-adapter/node_modules/vue-template-compiler/package.json_:

OLD:
  "name": "vue-template-compiler",
  "version": "2.6.11"

NEW:
  "name": "vue-template-compiler",
  "version": "2.6.10"

运行:

yarn

来源： https://github.com/vuejs/vue/issues/10932

注意：package.json 的路径和版本特定于我的情况。

Answer 14

我运行以下命令： yarn global upgrade

这将升级任何需要升级的关系

Answer 15

我只需要使这两个版本匹配（通过更改编译器值匹配 package.json 和运行中的 "vue" 值 npm install:

"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"

npm install

在这种情况下没有删除或其他任何东西。

Answer 16

这些步骤对我有帮助：

rm package-lock.json, rm -rf node_modules, npm update, npm install

Answer 17

执行全新安装有助于使用以下命令：

npm ci

可以找到有关此命令的更多详细文档 here。

Answer 18

这对我和你 100% 有效：

修改package.json: "vue": "^2.6.12" 为 "vue": "2.6.12"
删除文件夹node_modules
删除包-lock.json
运行 npm 安装

Answer 19

如错误信息所示：

这可能会导致无法正常工作。确保对两者使用相同的版本。如果您正在使用 vue-loader@>=10.0，只需 更新 vue-template-compiler。如果你正在使用 vue-loader@<10.0 或 vueify， 重新安装 vue-loader/vueify 应该将 vue-template-compiler 撞到最新的。

我使用的是更高版本的 vue-loader 所以我运行命令

npm update vue-template-compiler

这很有魅力

Answer 20

NPM 有专门的命令来处理这种情况试试这个：

npm install --legacy-peer-deps

如何修复 Laravel Spark v4.0.9 上的 "Vue packages version mismatch" 错误？

How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9?

vue.js

laravel-spark

vuejs2