WSL2上のVue.js のホットリロードが効かないまたは遅い場合の対処法

初めに

私はVue.jsの案件を担当しています。開発用のPCはWindowsを使っており、WSL2上で開発しているのですがホットリロードが効かなかったり遅かったので対処法を調べました。

環境

私の環境は以下になります。今回の環境ではホットリロード聞きませんでした。

• Windows 10
• WSL2
• Ubuntu20.04
• Vue.js 3.2.31

以前、nuxt.jsを使って開発をやった時は nuxt.config.js に以下を追加したところホットリロードが効くようになりましたが、変更が反映されるまでに1分以上かかっていたと思います。

watchOptions: { poll: true }

原因

Windowsのファイルシステム上（/mnt/c以下）にVue.jsのプロジェクトのファイルを置いてある場合にVue.js のホットリロードが効かないまたは遅くなる現象が起きることが分かりました。

対処法

/mnt/c以外の場所にファイルを移したところ、爆速でホットリロードされるようになりました。ソースコードを編集、保存してブラウザを見るともう反映されていました。サーバが起動するまでの時間も大分早くなったと思います。

新たな問題点

Linuxのファイルシステム上にプロジェクトを配置するとWindowsからは見えないため、普段使っているVisual Studio Codeが使えません。また、Gitの操作はSourceTreeを使っていたのでコマンドでやることになります。それは少し面倒だと思い、いい方法はないかと調べました。

プロジェクトフォルダに移動して以下のコマンドを実行することでVisual Studio Codeで編集することができることが分かりました。Visual Studio CodeはGitの操作もできるのでこちらを使って開発することにします。

code .

参考

Linux 用 Windows サブシステムで Visual Studio Code の使用を開始する