LaravelからViteをアンインストールしてLaravel Mixを入れる方法

Laravel Breeze

2022年6月末から、新規でLaravelをインストールすると、Laravel Mixではなく、Viteが自動で入ります。

本記事では、ViteをアンインストールしてLaravel Mixにしたい、という場合の方法を解説していきますね。

なお実行した環境は下記のとおりです。Vue.jsは使っていませんが、使う場合には、また他の設定も必要です。環境が異なると、記事通りの設定ではうまくいかない可能性があります。

  • Laravelバージョン9.19.0
  • Breezeパッケージをインストールした直後の開発環境
  • Breezeパッケージにデフォルトで入っているTailwind CSSを利用
  • Node.jsインストール済み

LaravelからViteをアンインストールする方法

①Vite削除コマンドを実行

 

②Vite設定ファイル(vite.config.js) 削除

VS Codeご利用の場合、プロジェクトの下のほうにファイルがあります。

 

③ テンプレートファイルのリンクを無効にする

resources/views/layouts/app.balde.php と resources/views/layouts/guest.blade.phpに

自動で入っている下記のコードを無効にします。

        @vite([‘resources/css/app.css’, ‘resources/js/app.js’])

 

④ package.jsonの変更

package.jsonのscriptsで、下記を削除します。

 

⑤  jsファイルの修正

resources/views/js/app.jsを書き替えます。

importをrequireにします。

 

resources/views/js/bootstrap.jsを書き替えます。

 

⑥ .envの修正

Vite用の設定を削除し、Laravel Mix用の設定を追加します。

削除

追加

LaravelにLaravel Mixを入れる方法

次にLaravel Mixを入れていきましょう。

① Laravel Mixインストール

 

② webpack.mixファイル作成

下記コードを入れます。

 

③ app.blade.phpにリンクを追加する

resources/views/layouts/app.balde.php と resources/views/layouts/guest.blade.phpの<head></head>内に、下記を追加します。

 

④ package.jsonの変更

package.jsonのscriptに、下記を追加します。

 

⑤  jsファイルの修正

Viteをアンインストールする項目に書いたので、省略します。

 

⑥ .envの修正

Viteをアンインストールする項目に書いたので、省略します。

 

準備は以上となります。npm run devを実行すると、Laravel Mixでコンパイルが行われます。

なおプロジェクト作成後、npm run devを行った時に

WARNINGS in child compilations とエラーが出たりしますが、これはまたViteと違う問題です。対策は下記にあります。

本記事を書いた理由

Laravelでは、2022年6月末より、新規プロジェクトを作成した際にLaravel Mixに代わってViteが入るようになりました。

わたしはLaravelの使い方を教えていますが、今回Viteになったことで、本番環境で エラーが出たり等の連絡が立て続けにありました。

そんな状況なので、「とりあえず、これまでどおりLaravel Mixを使いたい!」という人もいるかと思います。今回の記事はそんな方向けに書きました。

お役にたつことがあれば、嬉しいです。

さいごに

正直言うと、今のわたしのViteへの気持ちは、あまりポジティブではありません^^;

Junko
Junko

う、デフォルトでViteをいれるなんて、面倒なことを。

とちょっぴり思ってます。

ただもちろんViteに切り替わったことで速度等のメリットがありそうですし、最初は、なんでも不具合がつきもの。今後はどんどん良くなると思っています。

なおLaravel Mixに切り替える前に、もしかしたらエラーを修正できる可能性もあります!

下記にLaravel Viteに関するエラーと対策記事を取り揃えているので、参考にしてくださいね。

Laravel Breeze Laravel Viteの使い方とエラー対策 Laravelバージョンアップ・ニュース Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました