vite v2.9.13 dev server running at:
> Local: https://localhost:3000/
> Network: https://192.168.10.4:3000/
ready in 944ms.
Laravel v9.19.0
> APP_URL: http://localhost
npm run devの表示が全く違います。しかもコマンドが終了しない。Laravelのバージョンは9.19.0です。
$ php artisan -V
Laravel Framework 9.19.0
原因
2022年6月29日にLaravelのフロントエンドアセットバンドラがデフォルトでViteに変更されたことが原因のようです。Vite is now the default frontend asset bundler for Laravel applications
公式サイト: Bundling Assets (Vite)
Laravel-Mixに戻したい
将来的にはViteに移行するとして、当面Laravel Mixを使いたかったので色々調べた結果、Laravel Mix⇔ViteのMigration Guideが見つかりました。ただ、Migration Guideを参考にプロジェクトに変更を加えてもうまく動作しませんでした。結局、プロジェクトのpackage.jsonをたまたま残っていたLaravel 9.14.1のものに差し替えると、Larael Mixに戻すことができました。 package.json(9.14.1)の内容は次のとおりです。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.25",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
}
}
package.jsonを差し替えた後、プロジェクトのnode_modulesを削除してnpm installを実行します。その後、npm run devを実行すると、これまで通りLaravel MixでSassのコンパイルを行うことができました。
$npm run dev
> @ dev /home/isono/laravel9
> npm run development
> @ development /home/isono/laravel9
> mix
● Mix █████████████████████████ emitting (98%)
after emit
● Mix █████████████████████████ done (99%) plugins
WebpackBar:done
✔ Mix
Compiled successfully in 28.15s
Laravel Mix v6.0.49
✔ Compiled Successfully in 27807ms
┌────────────────────┬───────────┐
│ File │ Size │
├────────────────────┼───────────┤
│ /js/app.js │ 2.23 MiB │
│ css/common.css │ 690 bytes │
│ css/app.css │ 200 KiB │
│ css/custom.css │ 690 bytes │
└────────────────────┴───────────┘