容器化开发给我们带来了很多便捷,但是在开发环境下也有一些问题要注意,如果不解决这些问题,你的开发体验不会很好。
容器启动正常,却无法访问
我们用 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
}
如果以上解决了你的问题,别忘了留下你的点赞哦!