vue-cli の dev-server にモバイルからアクセス（同ネットワーク内）

はじめに

vue-cli を利用しての開発において、モバイルでの動作確認方法が分からず悩んだので、同じお悩みをお持ちの方へ、以下の方法を共有させていただきます。

localhost ではなく IP で

方法は簡単で、 vue-cli で生成されたファイルのうち、 /build/dev-server.js の以下を修正します（ localhost をプライベートIPに変更）。

devMiddleware.waitUntilValid(() => {
  portfinder.getPort((err, port) => {
    if (err) {
      _reject(err)
    }

    process.env.PORT = port
-   var uri = 'http://localhost:' + port
+   var uri = 'http://0.0.0.0:' + port //プライベートIPを記述
    console.log('> Listening at ' + uri + '\n')
    // when env is testing, don't need open it
    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
      opn(uri)
    }
    server = app.listen(port)
    _resolve()
  })
})

プライベートIPを固定しているなら上記のようにプライベートIP直書きでもいいでしょうし、動的なら internal-ip で自動的に記述してもらう方法もあります。

npm dev run で立ち上がったサーバーアドレスに、モバイルからアクセスすれば確認できます。
もちろん、サーバーのPCとモバイルが同じネットワーク内にいる必要があります。

おわりに

モバイルからの確認方法、探しても探しても見つからなくて、「簡単すぎて誰も書かないのか。。」とちょっと絶望していました。
色々調べたおかげで勉強になった2017の秋。
webpack も勉強せんとなー。