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 Mix, Vite Laravelバージョンアップ・ニュース Laravel・PHP豆知識・トラブル対策

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

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

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

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

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

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

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