【Laravel Vite】簡単なセットアップ方法とエラーの対処法

Laravel ViteはViteをLaravelに統合させるプロジェクトです。公式サイトもあり、たったの数コマンドを実行するだけでViteをLaravelに統合させることが出来ます。設定ファイルの変更作業はいりません。しかし、ドキュメントの手順通りにコマンドを入力しても「There are no commands defined in the “vite” namespace.」というエラーが出てしまいます。そこでこの記事では、Laravel Viteのセットアップ方法を説明しながら、発生するエラーの対処方法についても紹介します。

エラー「There are no commands defined in the “vite” namespace.」の対処法だけ知りたい方

ここからページ下部へ飛んで下さい。しばらくはLaravel Viteのセットアップ手順について説明しています。

Laravel Viteのセットアップ方法について１から知りたい方は順番に読んで行って下さい。

Laravel Viteとは

そもそもLaravel Viteとは、ViteをLaravelに統合させるプロジェクトです。

Laravel Vite

https://laravel-vite.innocenzi.dev/

LaravelにはLaravel Mixが搭載されていてVueを簡単に扱えますが、これにはWebpackを利用しています。
近年はWebpackよりも軽くて早いViteが注目されていることもあり、Laravel ViteではLaravelでも簡単にViteを扱えるようにします。

Laravel Viteのセットアップ方法

手作業で設定ファイルをいじることも出来ますが、コマンドを使えばすぐにVite環境を構築できます。Laravel Viteのサイトでもコマンドによる方法を推奨しています。ですので、この記事ではコマンドによる構築方法について紹介します。

①Laravel プロジェクトを作る

まずは普通にLaravelプロジェクトを作ります

laravel new プロジェクト名

②Laravel Viteのプリセットコマンド実行

プロジェクトディレクトリに入り、次のコマンドを実行します。

npx apply laravel:vite

もしここでエラーが出たら、npm i -g applyでapplyコマンドをインストールするか、--ignore-existingを付けてコマンドを実行します。

また、ここでGitアカウントとの連携とそのSSHキーの入力を求められます。入力したくない場合は--no-sshフラグをつけてコマンドを再実行します。

この時点で各種設定が自動的に行われ、ウェルカムページのbladeファイルやルーティングの書き換えや、Vueファイルなどが用意されます。

③npm installの実行

npm installを実行します

npm install

④@エイリアスの解決

resources/scripts/main.tsを見てみると、@というエイリアスが未定義のためにエラーが出ています
そこで、次のコマンドを実行してtsconfig.jsonを更新します。

php artisan vite:aliases

しかし次のようなエラーが出てコマンドが受け付けられません。

There are no commands defined in the “vite” namespace.

⑤エラーの解決

エラー解決の手順を説明します。たったの2ステップです。

①vendorディレクトリの削除

rm -rf vendor

②composer周りをアップデート

composer update

これでエラーがでなくなるので、④のコマンドphp artisan vite:aliasesを実行します。

⑥サーバの起動

npm run devとphp artisan serveで2つのサーバを立ち上げます。laravel側のサーバにアクセスし、Viteのウェルカムページが表示されていれば成功です。

まとめ

以上、Laravel Viteの紹介から簡単なセットアップの方法、エラーの解決方法に至るまでを解説しました。エラーの解決も含めて、たったの数コマンドでLaravel Viteの環境が構築できます。