feat: added clientPort to HmrOptions (#3578)

docs/config/index.md

@@ -427,12 +427,14 @@ export default async ({ command, mode }) => {
 
 ### server.hmr
 
-- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean }`
+- **Type:** `boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number }`
 
   Disable or configure HMR connection (in cases where the HMR websocket must use a different address from the http server).
 
   Set `server.hmr.overlay` to `false` to disable the server error overlay.
 
+  `clientPort` is an advanced option that overrides the port only on the client side, allowing you to serve the websocket on a different port than the client code looks for it on. Useful if you're using an SSL proxy in front of your dev server.
+
 ### server.watch
 
 - **Type:** `object`

packages/vite/src/node/plugins/clientInjections.ts

@@ -25,10 +25,10 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         const overlay = options.overlay !== false
         let port
         if (config.server.middlewareMode) {
-          port = String(
-            (typeof config.server.hmr === 'object' && config.server.hmr.port) ||
-              24678
-          )
+          if (typeof config.server.hmr === 'object') {
+            port = config.server.hmr.clientPort || config.server.hmr.port
+          }
+          port = String(port || 24678)
         } else {
           port = String(options.port || config.server.port!)
         }

packages/vite/src/node/server/hmr.ts

@@ -19,6 +19,7 @@ export interface HmrOptions {
   protocol?: string
   host?: string
   port?: number
+  clientPort?: number
   path?: string
   timeout?: number
   overlay?: boolean