在 Docker 容器中运行 Vite 开发环境，有这两个问题要注意
容器化开发给我们带来了很多便捷，但是在开发环境下也有一些问题要注意，如果不解决这些问题，你的开发体验不会很好。
容器启动正常，却无法访问
我们用 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
}
如果以上解决了你的问题，别忘了留下你的点赞哦！
原文地址：https://blog.csdn.net/weixin_41196185/article/details/140246738
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！