背景
LaravelにVueを導入し、いざ
$npm run dev
のコマンドを実行したものの
Vue packages version mismatch:
- vue@2.6.10 (C:\xampp\htdocs\hoge\node_modules\vue\dist\vue.runtime.common.js)
- vue-template-compiler@2.6.11 (C:\xampp\htdocs\hoge\node_modules\vue-template-compiler\package.json)
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.
このようなエラーが出て、実行ができなくなってしました。
エラーの原因が明確に表示され、解決方法も
vue-loader@>=10.0であればアップデートするだけだと
書かれているので簡単に解決できるのですが、vue-loaderやらvue-template-compiler
をなんだかあまり理解してないと
少しどうすればいいのかわからない部分もあったので記録として残しておきます。
解決方法
上記にある
- vue@2.6.10
- vue-template-compiler@2.6.11
のバージョンの違いがあるとエラーになってしまうので
これを同じバージョンのする必要があります。
片方のバージョンを下げるのは更に手間がかかってしまうので
この場合だと、前者のほうをアップデートしました。
以下のコマンドでサクッと実行することができます。
$npm i vue
これで
$npm run dev
でのエラーを解決することができました。
npm関連のエラーに関しては以下の公式npmサイトを見れば非常に参考になるかと思います。