vue + vuetify 環境構築で、vue-routerをいれると画面が真っ白になった対応 vuejs

vue + vuetify 環境構築で、vue-routerをいれると画面が真っ白になった対応

vue + vuetify 環境を勉強中。で、構築しているとvue-routerをいれると
画面が真っ白になって、画面が表示されず次にすすめない。
yarn serve で起動はするのだが、ログには何もでてない。
いろいろ調べた結果、vue と vue-router のバージョンがあってない様子。

vuetifyがvue3への対応は、現時点ではまだ未推奨なので、今回はvue2を使っているのだが
今の環境がvue2 の環境なのに、vue-routerはvue3 用でその相性がよくないのが原因。
なので、vue-routerをvue2用にダウングレードしていれなおしたら解決できた。


■1 現状のバージョン確認
# yarn list --depth=0 | grep router
├─ vue-router@4.0.14

https://www.npmjs.com/package/vue-router
https://www.npmjs.com/package/vue-router/v/3.4.9
をみると、vue2用は、vue-router3.4.9のようなのでこれをいれる
ダウングレードしてみて様子をみてみる

■2 vue-routerをいれなおし
# yarn add vue-router@3.4.9


■3 バージョン確認
# yarn list --depth=0 | grep router
├─ vue-router@3.4.9

# yarn list --depth=0 | grep vue
├─ vue-router@3.4.9
├─ vue@2.6.14
├─ vuetify@2.6.4


■4 再度、yarn serveで起動。次は別のエラーでたけど、キャッシュクリアしたらなおった
-----------
ERROR Failed to compile with 1 error
error in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
Module not found: Error: Can t resolve @vue/devtools-api in /node_modules/vue-router/dist
ERROR in ./node_modules/vue-router/dist/vue-router.esm-bundler.js 7:0-56
Module not found: Error: Can t resolve @vue/devtools-api in /node_modules/vue-router/dist
@ ./src/router.js 2:0-32 4:8-14 5:19-25
@ ./src/main.js 8:0-33 11:10-16
webpack compiled with 1 error
-----------

・キャッシュをクリアしてみる
# yarn cache clean --force
# npm cache clean --force

■5 yarn serve でブラウザ確認ok
再度 yarn serveで起動
すると次は無事起動できてなおかつ ブラウザでも表示確認できた。ok
それにしても、各ライブラリのバージョンの一致だったり、ログがわかりにくかったり問題はまだまだある印象...