HMR 高级配置

热模块替换（HMR）可自定义连接方式和更新策略。

HMR 配置

JavaScript

export default defineConfig({
  server: {
    hmr: {
      overlay: true,      // 显示错误覆盖层
      host: 'localhost',  // HMR 服务器主机
      port: 3000,         // HMR 端口
      protocol: 'ws',     // 连接协议
      clientPort: 3000    // 客户端连接端口
    }
  }
})

配置选项说明

选项	说明
overlay	显示错误覆盖层
host	HMR 服务器地址
port	HMR 服务端口
protocol	ws 或 wss
clientPort	客户端连接端口

注意：HMR 使用 WebSocket 连接实现实时更新。

禁用错误覆盖层

JavaScript

export default defineConfig({
  server: {
    hmr: {
      overlay: false  // 不显示错误弹窗
    }
  }
})

自定义 HMR 端口

JavaScript

export default defineConfig({
  server: {
    port: 5173,
    hmr: {
      port: 3000  // HMR 使用单独端口
    }
  }
})

HTTPS 环境 HMR

JavaScript

export default defineConfig({
  server: {
    https: true,
    hmr: {
      protocol: 'wss',
      host: 'example.com'
    }
  }
})

禁用 HMR

JavaScript

export default defineConfig({
  server: {
    hmr: false
  }
})

HMR 连接流程

JavaScript

浏览器 → WebSocket 连接 → Vite Server
         监听更新推送
         执行模块替换

网络环境适配

text

export default defineConfig({
  server: {
    host: true,  // 暴露网络
    hmr: {
      host: '192.168.1.100',
      port: 3000
    }
  }
})

要点总结

hmr 配置热更新参数
overlay 控制错误覆盖层
可自定义端口和协议
HTTPS 需配置 wss 协议