容器化开发给我们带来了很多便捷，但是在开发环境下也有一些问题要注意，如果不解决这些问题，你的开发体验不会很好。

容器启动正常，却无法访问

我们用 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
}

如果以上解决了你的问题，别忘了留下你的点赞哦！