More than 1 year has passed since last update.

WSL2上のコンテナでの開発時にviteのホットリロードが効かない事象への対処法

Posted at 2021-11-25

概要

vite で立ち上げた vue3 + Typescript のプロジェクトにおいて、.vue ファイルを更新した際にホットリロードが効かなかった。

###環境情報

WSL上での開発時にホットリロードが効かない現象があるとのこと。(issue)
VsCode の Remote Dev Container で、WSL2上のコンテナ上で開発していたため、これが原因。

issueにもあるように、vite.config.ts にホットリロードの設定を追記する。

vite.config.ts

export default defineConfig({
  plugins: [vue()],
+ server: {
+   watch: {
+     usePolling: true
+   }
+ }
})

これでホットリロードが動くようになった。