如何修复 Laravel Spark v4.0.9 上的“Vue 包版本不匹配”错误？答案

【问题标题】：How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9?如何修复 Laravel Spark v4.0.9 上的“Vue 包版本不匹配”错误？
【发布时间】：2017-09-09 21:30:17
【问题描述】：

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

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-truncate-filter、vuejs-datepicker）并再次尝试以上所有方法
用头撞墙

【问题讨论】：

yarn upgrade vue 2.4.1 为我解决了这个问题

标签： vue.js vuejs2 laravel-spark

【解决方案1】：

这对我有用：

修改package.json:

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

删除node_modules
运行npm install

【讨论】：

像个老板！是的，这也对我有用。谢谢@Espen。
我遇到了这个问题。尝试了所有解释，但没有奏效。得到同样的错误
我认为不需要删除node_modules，我遇到了，只需安装模板，npm install就可以了
根据下面的答案作为替代方案，您可以yarn upgrade vue@^2.0.8 和yarn upgrade vue-template-compiler@^2.1.8

【解决方案2】：

为 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 将只更新更新的包。

【讨论】：

你知道它为什么突然坏了吗？我从未更新过我的 npm，但它突然停止工作。谢谢

【解决方案3】：

不需要删除所有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 版本，但是当您想要更新 major 版本时它会失效。例如npm update 不会更新2.4.5 => 3.0.1，但可以更新

【讨论】：

..2.4.5 => 2.6.3（例如）

【解决方案4】：

运行以下命令对我有帮助

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

【讨论】：

帮我修好了 :)
也为我工作，我的 vue 版本是 2.5.13 和 vue-template-compiler 是 2.5.17 但运行命令后，它编译正确。谢谢
很高兴@nensamuel

【解决方案5】：

更新 Vue 是我的解决方案。

npm i vue@latest --save

想提一下，之前我做了Kamil' Ocean回答中描述的步骤：

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

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

一旦更新了 Vue，它就可以工作了。

【讨论】：

最佳答案在这里。

【解决方案6】：

我运行以下命令： yarn global upgrade

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

【讨论】：

【解决方案7】：

这些步骤帮助了我：

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

【讨论】：

【解决方案8】：

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

运行此命令

npm update vue-template-compiler

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

【讨论】：

【解决方案9】：

检查 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。

【讨论】：

这是我的解决方案。 vue 和 vue-template-compiler 的版本相同，并且没有前导 ^
@Juljan 感谢您提醒我有关领先 ^

【解决方案10】：

这对我和你的 100% 都有效：

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

【讨论】：

除了不做第一步外完美无缺。

【解决方案11】：

从接受的答案，而不是删除 node_modules 文件夹并再次运行yarn install，您可以直接升级这两个包：

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

这对我有用：

修改package.json： “vue”：“^2.5.2”到“vue”：“2.5.*”
删除文件夹 node_modules
删除 package-lock.json
运行 npm install

【讨论】：

mayday mayday maydya...我仍然有这个问题
delete package-lock.json @ShahidKarimi 我编辑了我的答案。

【解决方案14】：

我使用了npm install vue --save，这对我有用

【讨论】：

通过 npm 审计修复 --force after 也为我工作

【解决方案15】：

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

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

npm install

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

【讨论】：

【解决方案16】：

您不需要删除 node_modules 文件夹。

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

使用较低版本号更新软件包。在这种情况下，npm update vue。或者，你也可以npm update vue-loader

【讨论】：

【解决方案17】：

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

npm ci

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

【讨论】：

【解决方案18】：

如错误信息所示：

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

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

npm update vue-template-compiler

这就像魅力一样

【讨论】：

【解决方案19】：

[已解决！！]

我去了抱怨的 vue-template-compiler 的同一个 package.json 文件，更改了那里的包版本并运行 yarn，如下所示：

_~/.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 的路径和版本特定于我的情况。

【讨论】：