从繁琐的端口映射到浏览器频繁刷新：用 Docker 做 Vite 开发环境时遇到的事故

前端开发中，Docker 和 Vite 都是非常受欢迎的工具，但是，将 Vite 与 Docker 结合使用作为开发环境时，也可能会遇到一些问题。这篇文章探讨了在使用 Docker 做 Vite 开发环境时遇到的两个问题：Docker 端口映射失败和本地浏览器频繁刷新。

Docker 端口映射失败

当 Vite 和 Docker 结合使用时，Vite 会在 Docker 容器内部运行。默认情况下，Docker 容器内部的端口和主机端口是隔离的，无法直接访问。需要使用端口映射才能将 Docker 容器内部的端口映射到主机端口，这样才能在主机上访问 Docker 容器内部的应用程序。

然而，在实际使用中，可能会遇到 Docker 端口映射失败的问题。解决该问题的一个有效方法是给 Vite 配置 host 参数。以下步骤演示了如何配置 host 参数：

1. 创建一个名为 ".env.development.local" 的文件，并添加如下内容：

VITE_DEV_HOST=localhost

2. 在 Vite 的配置文件（通常是 vite.config.js）中，添加如下代码：

// vite.config.js
const path = require('path')

module.exports = {
  server: {
    host: process.env.VITE_DEV_HOST
  }
}

3. 重新运行 Vite 开发服务器：

npm run dev

在配置了 host 参数之后，Docker 端口映射应该可以正常工作了。

本地浏览器频繁刷新

在使用 Vite 和 Docker 作为开发环境时，还可能会遇到另一个问题：本地浏览器频繁刷新。这个问题的原因是，Vite 在检测到文件发生变化时会自动重新编译并刷新浏览器。

对于在开发环境中进行快速迭代和调试来说，这种自动刷新的行为是非常方便的。但有时我们可能只想对代码进行一些小的修改，并不需要刷新浏览器，而这种频繁的刷新行为可能会影响开发效率。

为了解决这个问题，可以给 Vite 配置禁用自动刷新的选项。以下步骤演示了如何禁用自动刷新：

1. 在 Vite 的配置文件（通常是 vite.config.js）中，添加如下代码：

// vite.config.js
const path = require('path')

module.exports = {
  server: {
    // 禁用自动刷新
    hmr: false
  }
}

2. 重新运行 Vite 开发服务器：

npm run dev

配置了 hmr 选项之后，浏览器将不会再自动刷新了。

除了禁用自动刷新之外，还可以通过其他方式来减少浏览器的刷新次数。例如，可以将 Vite 配置为只在保存文件时才刷新浏览器，或者可以在代码修改后手动触发浏览器刷新。