【Laravel】サブディレクトリに設置したアプリでapp.js、app.cssがnet::ERR_ABORTED 404 Not Found

Laravelに標準でついているコンパイルツールLaravel Mixを使っている場合で、以下のようにLaravel Mixを使ってアセットを書き出すように書いている場合に起こるようです。

Blade内で

<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>

原因

Laravel Mixでは、mix()で囲われたパスを自動的にルートパス以下の相対パスで書き換えるようです。なのでサブディレクトリにアプリを設置した場合は、サブディレクトリが抜けてしまいます。

対策

検索してみると、webpack.mix.jsに以下の一行を追記すると良いとあります。

mix.setResourceRoot('/subdir/');

さっそくやってみたのですが、どうにも上手くいかずだいぶ長い時間ネットをさまよいましたが、結局この方法ではダメでした。（setResourceRootがなぜかまったく反応せず・・・）

英語圏の記事で1つ参考になるものがあり、それによると以下のようにすることで対処できるようです。

Blade内で

<!-- Styles -->
<link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

<!-- Scripts -->
<script src="{{ url(mix('js/app.js')) }}" defer></script>

mix()をurl()で囲うというもの。実際にやってみるとなるほどうまくいった。mix()は相対パスを吐き出すのに対してurl()はアプリURLを絶対パスで吐き出す。なのでとりあえずこれで良さそう。

関連記事

【Laravel8】サブディレクトリに設置したアプリでlivewire.jsがnet::ERR_ABORTED 404 Not Found