ITblog

laravel8のVueをVue2からVue3にバージョンアップした

2021年05月23日

作っていたサイトのLaravelと使っていたVueのバージョンが2系だったのから3系にバージョンアップしました。

以下、手順についてのメモです。

Vueのバージョンの確認方法

プロジェクトフォルダで

npm list vue

[email protected]

2系な模様。これを3系に上げたい

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

[email protected]

Vue3系に上がってる!

num run dev を実行。

変なエラーが出る。丁寧に以下のコマンドを実行しろということ。

npm install @vue/compiler-sfc [email protected]^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で基本的なプログラムが表示できたのですが、スタート地点に立つだけでも大変ですね・・・。

コメントを残す

メールアドレスが公開されることはありません。