仮想環境でvue-cliを実行するのに詰まった話(備忘録)


vue-cliで起動したサーバにホストブラウザからアクセスできなかったので、その解決方法。
0.0.0.0で外部からもアクセスできるようにするのは知っていたけどその設定をどこに書けばいいかわからりませんでした。

実行環境
virtulabox
centos7
node.js
vue-cli

1.hostとportの変更

/configndex.js
~
 host: '0.0.0.0',
 port: 8080,
~

0.0.0.0で外部からアクセスできようにする。
portは自由に設定。

2.vue.config.jsを追加

プロジェクトルートは直下にvue.config.jsというファイルを作成。
そして以下を記述。

/vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

これでプロジェクトのルートで

npm run dev 

を実行すれば
http://ゲストIP:8080
にアクセスできるはずです!

参考にさせていただいたサイト・記事

https://qiita.com/white0221/items/d371a19b59af4cba8e8b
https://blog.ark3.net/2018/07/26/204/