vue-cli でローカルサーバを起動し，接続に時間が掛かる場合の対応方法

現在 Vue.js の勉強をしているのだが，以下のように vue-cli でサーバを立ち上げてブラウザでアクセスした所，接続にやたらと時間が掛かったので原因と対応方法についてまとめる．

$yarn serve
yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 1530ms


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.12:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

原因

はっきりとした原因が判明しなかったが，実施時は他のローカル開発環境も立ち上げていたことから，名前解決が上手くいっていないのではないかということがわかった．

こちらの記事がとても参考になった．

labo.nozomi.bike

対応方法

上記の記事にもある通り，vue-cli のプロジェクト直下にvue.config.jsを作成し，以下のようにポート番号を変更すれば良い．

module.exports = {
  devServer: {
    port: 8888,
    disableHostCheck: true,
  },
};

vue.config.js の詳細はこちらのドキュメントを見た． cli.vuejs.org

もしくは，起動している他のローカル開発環境を停止すれば，vue-cliのポート番号を変えなくても良さそうではある．

まとめと所感

今回は vue-cli のローカルサーバの接続に時間が掛かる場合の対応方法についてまとめてみた．ホットリロードも上手く効かなったため，ここは解決するかしないかで勉強も開発にも関わってくるので，原因が何とかクリアできて良かった．この調子で Vue.js を習得していくぞ！！