底辺SE奮闘記

年収300万SEブログ

【Laravel・Vue.js】php artisan serve --host 0.0.0.0と初期状態のnpm run hotが両立しない件

環境

  • Laravel 5.7

現象

iOSでの見え方を確認するため

php artisan serve --host 0.0.0.0

を実行。更新をすぐに確認したいので

npm run hot

を実行していた。(実際はyarnだった)

上記の状態でiOS(外部デバイス)からアクセスすると、

画面が真っ白

色々調査を続けているとhtml中に原因を発見

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

これが、

<script src="//localhost:8080//js/app.js">

こう展開されているのである。これじゃ外部からは動かないはずだ。

mixの設定を変更してあげることでこの現象を回避できるらしい。わかり次第追記の予定。

妥協案

npm run watch

してからの手動ブラウザリロードで確認する。

解決

これでokです

const mix = require('laravel-mix');

mix.options({
    hmrOptions: {
        host: '[ホスト機のIPアドレス]',
        port: 8080
    }
})
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');