如何为Vite应用注入自定义HMR变量？以重定义__HMR_PORT__为例

Vite 项目配置方案 #

Vite 中__HMR_PORT__属于内部注入的变量，直接通过.env定义无法被客户端识别，需通过配置文件指定并按需暴露：

• 第一步：修改vite.config.js，指定HMR端口

  export default {
    server: {
      hmr: {
        port: 3001 // 替换为你需要的端口号
      }
    }
  }
  

• 第二步：若需在客户端代码中访问该端口，在.env中定义带前缀的变量（Vite仅识别VITE_前缀的客户端环境变量）：

  VITE_HMR_PORT=3001
  

  之后在代码中通过import.meta.env.VITE_HMR_PORT获取，而非直接使用__HMR_PORT__。

Webpack 项目配置方案 #

Webpack 需同时配置HMR端口和通过插件注入全局变量：

• 在webpack.config.js中添加以下配置：

  const webpack = require('webpack');
  
  module.exports = {
    devServer: {
      hot: true,
      client: {
        webSocketURL: {
          port: 3001 // 设置HMR的WebSocket端口
        }
      }
    },
    plugins: [
      new webpack.DefinePlugin({
        '__HMR_PORT__': JSON.stringify(3001) // 将端口注入为全局变量__HMR_PORT__
      })
    ]
  };
  

  配置完成后，客户端代码中即可直接访问__HMR_PORT__，值为你指定的端口。

常见问题说明 #

• 直接在.env中定义__HMR_PORT__无效的原因：多数构建工具不会自动将无特殊前缀的环境变量注入客户端全局，尤其是这类带有双下划线的内部变量，需通过对应工具的配置或插件显式处理。

内容的提问来源于stack exchange，提问作者Don Tomato