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

当我在 LaravelSpark 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 模板编译器的确切版本，而不是将其留给 npm 来安装或纱线来计算依赖关系
  • 删除其他不必要的包(vue-router、 vue-truncate-filter、 vuejs-datepicker) ，然后再次尝试以上所有方法
  • 用头撞墙
124663 次浏览
小开
最佳答案

This worked for me:

  1. Modify package.json:

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

  2. Delete node_modules

  3. Run npm install
小开

Check dependency for vue and replace with exact in dev dependency for vue-template-compiler.

For eg.

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

Should be replaced with:

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

And run the npm install again.

小开

This worked for me:

  1. Modify package.json: "vue": "^2.5.2" to "vue": "2.5.*"
  2. Delete the folder node_modules
  3. Delete package-lock.json
  4. Run npm install
小开

Here, vue template compiler compiles the vue template. If you use vue one version and vue-template-compiler another version, that's a problem.

Run this command

npm update vue-template-compiler

This will fix the issue and it will install a vue template compiler same version like vue js version.

小开

Running the following command helped me

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

NB. Replace the version number with the right version that you need. In my case the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.

Hope this helps someone

Vue packages version mismatch error fix

小开

For vue ^2.5.17.

In your package.json

Simply Add this in devDependencies or update the version of vue-template-compiler:

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

You wil have this output:

"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
},

After that, run:

npm install

Npm will update only the updated packages.

小开

You don't need to delete node_modules folder.

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

Update the package with a lower version number. In this case, npm update vue. Optionally, you may want to npm update vue-loader too

小开

Don't need to remove all node_modules folder. Just update packages: vue, vue-template-compiler and vue-server-renderer by @latest flag and it should help for any cases with dismatched versions of vue packages.

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

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

--save will automatically update version in your package.json file. @latest means install latest available version of package. If you need to update vue do it by the same way like we do it in above example.

Also, you always can check new versions for updates by command: npm outdated. It shows you all list of packages, that should be updated.

By the way, npm update command update only minor and patches versions, but it unusles when you want to update major version. For example npm update will not update 2.4.5 => 3.0.1, but can update

小开

From the accepted answer, instead of deleting node_modules folder and run again yarn install, you can simply upgrade those 2 packages directly:

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

Try this : npm install vue-template-compiler@2.0.8 --save-dev

Converting the vue-template-compiler version to same as vue version (for this case 2.0.8) worked for me. Give it a try.

小开

I used npm install vue --save and that worked for me

小开

Updating Vue was the solution for me.

npm i vue@latest --save

Want to mention that previously I do the steps described in Kamil' Ocean answer:

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


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

Once updated Vue it worked.

小开

[SOLVED!!]

I went to the very same package.json file of the vue-template-compiler that is complaining, changed the version of the package in there and run yarn, like so:

_~/.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"

Run:

yarn

Source: https://github.com/vuejs/vue/issues/10932

Note: path to package.json and versions are specific for my case.

小开

I run the following command: yarn global upgrade

That will upgrade any relation that need some upgrading

小开

I just had to make these two versions match ( by changing the compiler value match the "vue" value in the package.json and run npm install:

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


npm install

No deleting or anything else in this case.

小开

This steps helped me:

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

Doing a clean install helped using the following command:

npm ci

More detailed documentation about this command can be found here.

小开

This worked for me and your 100%:

  1. Modify package.json: "vue": "^2.6.12" to "vue": "2.6.12"
  2. Delete the folder node_modules
  3. Delete package-lock.json
  4. Run npm install
小开

As seen in the error message:

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.

I was using a higher vue-loader so I ran the command

npm update vue-template-compiler

and that worked like charm

小开

NPM have special command to handle such a situation try this:

npm install --legacy-peer-deps
小开

this command save me.

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

小开

You can do it like this:

  1. reinstalling the vue version and the compiler with the same version by example npm i vue@2.6.14 npm i vue-template-compiler@2.6.14

or you can do : change it in the package.json

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

or you can do : npm update vue-template-compiler if you are using the latest version of vue,

delete the module file and do npm install

小开

maybe you can just run this to change the vue-loader

npm install vue-loader@latest --force

it works with me

小开

Need to use the same vue-template-compiler as the version of vue been installed.

So I

npm uninstall vue-template-compiler --save-dev

and reinstall with

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

as the version of vue installed in my package-lock.json is 2.6.14.

小开

Each one of us will have won the solution. So you need to see your vue version from your Error Message. For me, my Error was : vue@2.6.14 vue-template-compiler@2.7.14

Ok from the Error Message, I find that the vue version is 2.6.14, So we need to update vue-template-compiler to that version, using:

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

提交答案