ホーム > Laravel | Vue | 技術系 > laravel8のVueをVue2からVue3にバージョンアップした

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

作っていたサイトの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で基本的なプログラムが表示できたのですが、スタート地点に立つだけでも大変ですね・・・。

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
https://www.itblog.jp/wp-trackback.php?p=10003
トラックバックの送信元リスト
laravel8のVueをVue2からVue3にバージョンアップした - ITblog より

ホーム > Laravel | Vue | 技術系 > laravel8のVueをVue2からVue3にバージョンアップした

フィード

ページの上部に戻る