[Bug fix] WSL에서 Hot Reloads가 작동하지않는 현상

Environment

• Vue-cli: 4.5.13
• Node.js: v14.17.3
• Editor: VsCode
• Terminal: WSL2

Bug

Vue Cli를 통해 Vue 프로젝트를 생성하고, npm run serve를 통해 브라우저 창을 띄웠다. 코드를 수정하고 저장하면, 컴파일이 자동으로 진행되고 브라우저에 변경사항이 반영되었어야 하는데(Compile and hot-reloads), 작동하지 않았다.

Debug

• Vue-cli의 버전 문제일 것이라 생각하고, 구글링을 통해 이것저것 설정해보았지만 다 작동하지 않았다.
  • https://stackoverflow.com/questions/53589853/vue-cli-3-hot-reload-suddenly-not-working-in-browsers
  • https://github.com/vuejs/vue-cli/issues/2051
  • https://stackoverflow.com/questions/39066298/webpack-dev-server-hot-reload-not-working

Fixed

버그는 예상치 못한 곳에서 발생했는데, Windows 파일 시스템에 파일을 위치시켜놓고 Linux에서 작업하던 것이 문제였다.

• 솔루션을 발견한 페이지 (https://github.com/microsoft/WSL/issues/6255)

  is your project store on your Windows file system or inside of your Linux file system? (i.e: Is it in /mnt/c ? )

  If it is in the Windows file system, I believe you're running into the fact that the Plan 9 server in WSL 2 does not support file watching on Windows files. As a workaround I'd recommend you place your files into the Linux file system

=> WSL에서 /mnt/c 디렉토리, 즉 Windows 디렉토리에 파일을 위치시켜놓고 작업하면, WSL은 파일의 변화를 감지하지 않는다. 그래서, Hot reloads가 작동하지 않던 것이었다.

따라서, WSL에서 작업하면서 hot reloads 기능을 이용하고 싶다면 Linux file system에 파일을 위치시켜야 한다. Linux의 /home 디렉토리 하위에 프로젝트를 위치시켜서, 문제를 해결했다.