Vue-CLI3 HRM(Hot reload Module)が効かなくてハマった。

表題の通りです。

新しいプロジェクトがちょうどいい規模なので、Vue-CLI3で作り始めたら、HRM（自動更新）が効かなくて盛大にハマりました。解決方法はファイルを１つ追加するだけでした。

ルート直下にvue.config.jsを追加する

内容はこちら

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

ルート直下とは、srcやpublicフォルダがある階層です。

consoleを見ると、Websocketにエラーが出ていました。vue.config.jsを新しく作って、ポート番号を8080→8888に変更。

dev-serverのパラメータに”disableHostCheck: true”を追加することで解決しました。

どうやらこのパラメータがないとWebsocketにエラーが出やすいそうです。

webpack.config.jsなどが見えないところにいって、vue-cliはシンプルですごいなーと思っていた矢先、開発環境の根本を理解していないせいで、アプリ制作以前の開発環境作りでハマってしまいました。

調べてもなかなか見つからなかったので、同じ問題に直面している人の助けになれば幸いです。

参考になったサイトhttps://dev.classmethod.jp/client-side/spa/change-vue-project-devserver-port/#toc-vue-config-js