はじめに
vue-cliで生成したアプリ原型を元に開発をしてて、そのアプリの性質上モバイルデバイスでの確認を簡単に行いたい、しかしデフォルトのnpm run devで立ち上がる開発サーバーではモバイルチェック（wifiによるアクセス）はできない、という状態になりました。
broswer-syncを使った解決方法は一応知っていましたが、一から構築するのはかなり骨が折れるので、なるべくvue-cliデフォルトのwebpack-dev-serverを使った設定を流用したいところでした。
そこで色々いじってみたところ、とりあえずうまくいったのでその方法を書いておきます。
なおタイトルにvue-cliと書いたものの、基本的にはwebpack-dev-serverの設定によるものです。特有なのは設定ファイルの位置だけです。
環境・前提
windows 10 64bit
webpack-dev-server v2.9.1
vue-cli v2.8.2
iOS 10.3
android 5.1
サーバー設定を修正
デフォルトではホスト名はlocalhostとなっていますが、まずこれを変えます。
config/index.jsを開き、ホストを0.0.0.0に書き換えます。
module.exports = {
dev: {
/* 中略 */
// Various Dev Server settings
// host: 'localhost', // can be overwritten by process.env.HOST
host: '0.0.0.0', // <- 'localhost'から書き換える
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
/* 中略 */
}
/* 中略 */
}
そしてnpm run devでサーバーを立ち上げ、ターミナルに
Your application is running here: http://0.0.0.0:8080
と出ればOKです。
（追記）useLocalIpオプションについて
本稿を執筆した当時のwebpack-dev-serverには確か無かったはずですが、現行バージョンにはuseLocalIpというオプションがあります。これをオンにしてサーバーを立ち上げると、
Your application is running here: http://192.168.mm.nn:8080
という風に最初からローカルIPアドレスを割り当てた状態のURLを表示してくれるため、自分でURL置換をする手間が省けます。
// Various Dev Server settings
// host: 'localhost', // can be overwritten by process.env.HOST
host: '0.0.0.0', // <- 'localhost'から書き換える（こちらも依然設定する必要あります）
useLocalIp: true, // <- 追加
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
dev-serverのバージョンが古いなどで、このオプションが使えない場合は次項の方法でローカルIPアドレスを確認します。
ローカルIPアドレスを確認・置換する
このままhttp://0.0.0.0:8080にアクセスしてもエラーページが表示されるだけです。（少なくとも自分のwin環境ではそうでした）
ここで一旦コマンドプロンプト等でipconfigと打ち、出力の「イーサネット アダプター ローカル エリア接続」の「IPv4 アドレス」を見てみます。すると192.168.nn.mm的な数字が書かれていると思います。
先程のURLの0.0.0.0のところをこのipアドレスに置き換えます。
例えば192.168.11.8であればhttp://192.168.11.8:8080が対象URLになります。
サーバーを立ち上げた端末（PC）と同一ネットワーク（wifi含む）に接続しているデバイスならばこのURLにアクセスすることでアプリが開けます。
（ファイアウォールの設定によってはここで引っかかる可能性もありますが、詳細はここでは割愛。プライベートネットワークでのアクセスを許可してれば問題ないと思われます。）
ちなみにサーバー設定でhost: '192.168.11.8'のように直接ipアドレスを設定することでも同様の結果が得られます。
ただ、ipアドレスは環境によって変わったりするのであまりおすすめはしません。
【別問題】es2015コードが引っかかった
サーバーホスト問題は上記で解決し、この段階でandroid（google chrome）でアクセスしてみると正しく読み込めました。
しかしiOS safari（chromeも同様）ではなぜかまっさらなページが表示されるだけ…。（正確にはindex.htmlそのものは読み込めているが、アプリ本体であるapp.jsが何らかの不具合で動いていない状態）
調べてみるとこれはwebpack-dev-serverの吐き出すスクリプトにes2015コードが含まれているのが原因とのこと。
チェックに使ったiOS 10.3では一部未対応だったため、エラーになっていたようでした。
（確認してませんが、es2015未対応の古いブラウザでも同様のことが起きると考えられます）
これはbuild/webpack.base.conf.jsを開き、babel-loaderの対象にwebpack-dev-serverを含めてトランスパイルさせると良いです。
/* 中略 */
module: {
rules: [
/* 中略 */
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'), resolve('test'),
resolve('node_modules/webpack-dev-server/client') // <- 追加
]
},
/* 中略 */
]
}
/* 中略 */
この設定を保存し、再度サーバーを立ち上げればOKです。