[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vue在docker中hot-reloading失效的問題":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},72,"vue在docker中hot-reloading失效的問題","[Vue]在docker中Hot-Reloading失效的問題","Vue在docker中hot reload失效的問題 這陣子在嘗試在開發流程中導入docker，有次寫Vue時 […]","\u003Ch1>Vue在docker中hot reload失效的問題\u003C\u002Fh1>\n\u003Cp>這陣子在嘗試在開發流程中導入docker，有次寫Vue時就發生了標題所述的狀況。\u003Cbr \u002F>\n通常我們在啟動node之後，修改文檔不用重啟服務，就能直接在網頁看到調整的結果，在Vue中是透過Hot-Reloading這個機制，偵測文檔是否變動過而重新載入到服務中。\u003Cbr \u002F>\n但掛載到docker後我發現這個機制失效了，一開始以為是設定問題，找了幾種方式來重啟Hot-Reloading結果都失敗，最後發現是docker掛在volumes時似乎無法偵測到host端的檔案修改裝態。\u003C\u002Fp>\n\u003Ch2>解決方式\u003C\u002Fh2>\n\u003Cp>解決方式很簡單，設定CHOKIDAR_USEPOLLING這個環境參數即可。\u003Cbr \u002F>\n因為我是用docker-compose，所以設定方式如下：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-yml\">version: "3.3"\n\nservices: \n  my_app:\n    ....\n    ports:\n      - "3030:3000"\n    volumes:\n      - \u002Fpath\u002Fon\u002Flaptop:\u002Ftarget\u002Fin\u002Fcontainer\n    stdin_open: true\n    tty: true\n    environment:\n      - ...\n      - CHOKIDAR_USEPOLLING=true #加上這個\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>如果用Dockerfile則也可以用指令方式呼CHOKIDAR_USEPOLLING\u003Cbr \u002F>\n這樣就能在容器中偵測volumes的檔案變化囉！\u003C\u002Fp>\n\u003Cp>可以參考以下資料\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fdaten-und-bass.io\u002Fblog\u002Fenabling-hot-reloading-with-vuejs-and-vue-cli-in-docker\u002F\">https:\u002F\u002Fdaten-und-bass.io\u002Fblog\u002Fenabling-hot-reloading-with-vuejs-and-vue-cli-in-docker\u002F\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpaulmillr\u002Fchokidar\">https:\u002F\u002Fgithub.com\u002Fpaulmillr\u002Fchokidar\u003C\u002Fa>\u003C\u002Fp>\n","2022-07-15T14:00:10","",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fvue在docker中hot-reloading失效的問題",1]