vite 如何指定热更新ws端口

Question

vite + vue3的项目
运行开发模式: 127.0.0.1:9001
通过Nginx配置 local-xxxx.com 代理到 127.0.0.1:9001
访问127.0.0.1:9001一切正常
访问local-xxxx.com会在展示成功后自动重新加载(每次页面展示完之后自动reload)

经测试发现在访问local-xxxx.com时, Websocket连接失败导致.

在vite.config.js server中有一项hmr配置:

export interface HmrOptions {
  protocol?: string
  host?: string
  port?: number
  clientPort?: number
  path?: string
  timeout?: number
  overlay?: boolean
  server?: Server
}

当前尝试配置:

{
        server: {
            host: true,
            port: 9001,
            open: true,
            proxy: {
                '/api': {
                    target: process.env.SERVER_URL,
                    changeOrigin: true,
                },
            },
            hrm: {
                clientPort: 80,
                port: 80,
            }
        },
}

nginx配置:

map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
}
server {
        listen 80;
        server_name local-xxxx.com;

        location / {
                proxy_pass http://127.0.0.1:9001;
                proxy_read_timeout 300s;
                proxy_send_timeout 300s;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
        }
}

但是配置端口没有效果.

导致刷新的源码:

====================================
域名带端口在当前开发环境下是应该也能正常连接才对
最终处理方式是在hosts中将域名由127.0.0.1 改为 wsl的ip, 这个时候就都正常了.
可能是个人的开发环境太复杂了. (vscode:wsl wsl+nginx)

Answer 1

看你的描述，连接失败，是不是nginx的问题，我使用vite重载没有出现类似的问题

我的nginx 配置

Answer 2

是 server.hmr，不是 server.hrm