Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[Vue]在docker中Hot-Reloading失效的問題

內容目錄

Vue在docker中hot reload失效的問題

這陣子在嘗試在開發流程中導入docker,有次寫Vue時就發生了標題所述的狀況。
通常我們在啟動node之後,修改文檔不用重啟服務,就能直接在網頁看到調整的結果,在Vue中是透過Hot-Reloading這個機制,偵測文檔是否變動過而重新載入到服務中。
但掛載到docker後我發現這個機制失效了,一開始以為是設定問題,找了幾種方式來重啟Hot-Reloading結果都失敗,最後發現是docker掛在volumes時似乎無法偵測到host端的檔案修改裝態。

解決方式

解決方式很簡單,設定CHOKIDAR_USEPOLLING這個環境參數即可。
因為我是用docker-compose,所以設定方式如下:

version: "3.3"

services: 
  my_app:
    ....
    ports:
      - "3030:3000"
    volumes:
      - /path/on/laptop:/target/in/container
    stdin_open: true
    tty: true
    environment:
      - ...
      - CHOKIDAR_USEPOLLING=true #加上這個

如果用Dockerfile則也可以用指令方式呼CHOKIDAR_USEPOLLING
這樣就能在容器中偵測volumes的檔案變化囉!

可以參考以下資料
https://daten-und-bass.io/blog/enabling-hot-reloading-with-vuejs-and-vue-cli-in-docker/

https://github.com/paulmillr/chokidar