📚 课程目录第2章配置开发环境与热更新

2. 配置开发环境与热更新

任务说明

本案例要求搭建一个可独立运行的开发环境，核心目标是：当源码文件被修改并保存后，浏览器中的页面无需手动刷新即可自动更新。我们将使用 Vite 作为构建工具，因为它内置了热模块替换（HMR）能力，且配置极简，适合作为企业级应用开发环境的基础。

环境准备

确保本机已安装 Node.js 18+ 和 npm。在空白目录中执行以下命令初始化项目：

npm create vite@latest dev-env-demo -- --template vanilla
cd dev-env-demo
npm install
npm run dev

启动后终端会输出本地访问地址（通常为 http://localhost:5173），浏览器打开该地址即可看到 Vite 默认页面。

核心实现：热更新验证

Vite 的 HMR 功能默认开启，无需额外配置。为了验证热更新确实生效，我们需要修改默认生成的文件，使其包含可观察的、动态变化的内容。编辑项目根目录下的 index.html 和 src/main.js，替换为以下内容：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>热更新验证环境</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

// src/main.js
const app = document.querySelector('#app');

function render(timestamp) {
  app.innerHTML = `
    <h3>开发环境热更新验证</h3>
    <p>当前渲染时间：${new Date(timestamp).toLocaleTimeString()}</p>
    <p>修改此文件并保存，观察页面是否自动更新（无需手动刷新）。</p>
  `;
}

render(Date.now());

// 启用 Vite 的 HMR 接口：当本模块被修改时，自动重新执行 render
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    if (newModule) {
      newModule.render(Date.now());
    }
  });
}

验证方法与判定标准

完成上述文件替换后，浏览器中应显示“开发环境热更新验证”标题和一条时间记录。现在执行以下操作：

保持 npm run dev 持续运行，浏览器页面保持打开。
编辑 src/main.js，将 <h3> 标签内的文字改为“热更新已生效”，保存文件。
观察浏览器页面：标题文字应自动变为“热更新已生效”，且页面没有发生整页刷新（可通过浏览器开发者工具 Network 面板确认没有重新加载文档）。
同时观察终端：Vite 会输出类似 hmr update /src/main.js 的日志。

判定标准：保存文件后 1 秒内页面内容自动更新，且终端出现 HMR 更新日志，即表示热模块替换配置成功，代码变更即时生效。

HMR 工作流程示意

常见问题排查

如果保存文件后页面没有自动更新，请按以下顺序检查：

确认终端中 npm run dev 仍在运行且无报错。
确认浏览器访问的是 Vite 输出的地址（而非直接双击打开 index.html，file:// 协议不支持 HMR）。
检查 src/main.js 中是否包含 if (import.meta.hot) 代码块——若删除该块，模块变更将触发整页刷新而非热更新。
部分企业代理或防火墙可能阻断 WebSocket 连接，需确保 5173 端口未被拦截。