容器化開發給我們帶來了很多便捷，但是在開發環境下也有一些問題要注意，如果不解決這些問題，你的開發體驗不會很好。

容器啟動正常，卻無法訪問

我們用 Docker 啟動一個 Vite + Vue3 項目的開發環境后，發現端口日志一切正常。

但是在瀏覽器中打開對應地址訪問時，會無法訪問，就好似網絡根本不通。但是實際上，我們的端口映射是正常的。

這是因為，Vite 默認的 host 是 localhost，而 localhost 實際上是一個特殊的域名，容器中的 localhost 與宿主的 localhost 不是一個概念。我們需要將 vite.config.ts 中的 server.host 修改為 0.0.0.0，這樣才能保證端口映射后能找到對應的服務。

export default defineConfig({server: {host: "0.0.0.0",...}
}

修改后就能夠正常訪問了。同理，當我們使用 Webpack 時，devServer 也要做對應的修改。

修改文件后，HMR熱更新失效

使用 Docker 開發環境時，我們最關注的一個特性是 HMR，因為我們需要在修改源碼后立刻看到效果，如果沒有這個能力的支持，使用 Docker 搭建開發環境也就失去了意義。如果我們不做特殊的配置，就會發現 HMR 在 Docker 開發環境中失效。

如果你遇到了這個問題，請直接修改 vite.config.ts，將 server 的 watch 配置做一個修改即可。

watch: {usePolling: true
}

如果以上解決了你的問題，別忘了留下你的點贊哦！