laravel8のVueをVue2からVue3にバージョンアップした
2021年05月23日
作っていたサイトのLaravelと使っていたVueのバージョンが2系だったのから3系にバージョンアップしました。
以下、手順についてのメモです。
Vueのバージョンの確認方法
プロジェクトフォルダで
npm list vue
２系な模様。これを３系に上げたい
package.jsonの編集
プロジェクトフォルダのpackage.jsonを編集します。
まずは編集前に、package.jsonをバックアップ後、以下の記述を削除
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"Vue3のインストールを実行
Vue3のインストールをnpmで実行します。
npm install -save-dev [email protected]
その後、再び vue のバージョンを確認
npm list vue
Vue3系に上がってる！
num run dev を実行。
変なエラーが出る。丁寧に以下のコマンドを実行しろということ。
npm install @vue/compiler-sfc vue-loader@^16.1.0 –save-dev –legacy-peer-deps
上記を実行後、npm run devを実行。
問題なく実行できました。
そして、あとはアプリ側のVueのソースを、Vue3のプログラムに書き直します。
これは、ここのサイトを参考にさせていただきました。
Vue 3 を Laravel 8で使う方法（npm） | console dot log
これで、うまく行った・・・かと思いきや、ローカルではうまく動いたのに、本番環境ではテストプログラムが動作しません。
散々調べた挙げく、原因が分かりました。
CDNのキャッシュ
Laravel + Vueでは、npm run devで、app.jsをビルドするのですが、
これが、古いファイルがCDNにキャッシュされてエラーになっていたのが原因でした。
CDNのキャッシュをクリアすることで、無事に表示されることになりました。
と、ここまででようやくLaravel8 + Vue3で基本的なプログラムが表示できたのですが、スタート地点に立つだけでも大変ですね・・・。