Vue jsでアプリケーションがブラウザから見れない時

ボイラーテンプレートで、yarn devなどをすると次のようなメッセージが出てきます。

Your application is running here: http://localhost:8080

ただこれでも見れない時があります。

思いつく原因をいくつか並べて見ます。

ポート番号が被っている

このパターンの場合、そもそも開発サーバーが立ち上がらないはずです。

もしくはよしなに違うポートにバインドしてくれることもあります。

例えば、8080で起動しようとしたが、既に使われていたので8081で変わり起動するなど。

ブラウザのキャッシュが残っている

あんまり考えられないですが、シークレットモードやキャッシュクリアで見れる可能性があります。

回避策

本番環境とは違い、開発環境なので、回避できればなんでも良いわけです。

ポートを占有してみる

勝手に8080で立ち上がるなら、まずは簡易的なサーバーを立ち上げてポートを占有してみたらどうなるのか見てみます。

何でもいいですが、phpでやるならこんな感じです。

php -S localhost:8080

そのあと、nodeを立ち上げてみます。

yarn dev

これでエラーが出れば切り分けができますし、出なければ違う方法を試します。

ポート番号を変更する

何かわからないけれども起動しない。

そんなときはポート番号を変えたほうが早いかもしれません。

ボイラーテンプレートによって違うかもしれませんが、envの設定を変更してみましょう。

次のようキーワードが目安になります。

process.env.PORT

これを変更している値を8081などに上書きして

yarn dev

を実行してみます。

大概これで解決します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です