quasar dev 每 5 秒自动刷新一次，我如何阻止它这样做？

Question

我有一个 Web 服务器和后端在 nginx 反向代理后面运行，但由于某种原因，当我在这样的设置中运行

quasar dev

时，Web 服务器每隔几秒自动刷新一次。这似乎是热重载出了问题（它阻止我导航页面、检查浏览器中的变量等），但我不明白在哪里/如何追踪其原因。

我已经尽力将其复制品做得尽可能小。这是用于设置的

docker-compose.yml

文件：

version: '3.7'
services:
  proxy:
    image: nginx:1.25.5
    ports:
      - 9876:80
    volumes:
      - /path/to/nginx.conf:/etc/nginx/nginx.conf
      - /path/to/proxy.conf:/etc/nginx/conf.d/default.conf
  ui:
    image: node:22.1.0
    volumes:
      - /home/quant/quasar_test/:/ui/
    working_dir: /ui/
    command:
      - /bin/sh
      - -c
      - |
        cd quasar-project
        npx quasar dev

请注意，我已经删除了后端组件，因为不需要它来重现此问题。

quasar_test

目录的构建如下：

mkdir quasar_test
docker run -p 9000:9000 -v quasar_test:/quasar_test -it node:22.1.0 /bin/bash
npm init quasar # (pick defaults for everything)
npm i -g @quasar/cli
cd quasar-project/
quasar dev

proxy.conf

看起来像这样：

server {
    listen 80;

    charset utf-8;

    location / {
        proxy_pass http://ui:9000;
    }
}

和

nginx.conf

是这样的：

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

知道是什么原因造成的吗？这使得调试前端变得非常困难，因为任何在 chrome 中检查变量/控制台的尝试每 5 秒就会被摧毁！

我尝试过的事情：

我将以下内容添加到我的

quasar.config.js

中，试图停止自动重新加载，但似乎没有帮助：

devServer: {
      // https: true
      open: true, // opens browser window automatically
      hot: false,
      liveReload: false
    },

直接从 docker 启动 quasar（没有

nginx

）效果很好（没有自动刷新）。但是，这对我来说不是一个解决方法，因为我的实际开发环境需要与后端进行完整的反向代理设置。

我发现的唯一解决方法是在运行 docker 容器的终端上按 CTRL+C。这会停止浏览器上的刷新，让我相信这是服务器端问题。

Answer 1

问题是双重的：

1. Vite（Quasar 底层的工具框架）不知道它在哪些端口上运行。
2. nginx 未配置为传递 websocket 代理所需的标头（vite 用于 HMR / 热重载）。

这表现为浏览器控制台中无限循环的以下错误（并且每次都重新加载我的网页）：

[vite] connecting...
Navigated to http://sy4tnt01:9876/
WebSocket connection to 'ws://localhost:9876/' failed: 
[vite] server connection lost. polling for restart...

为了让 Vite 了解 websocket 服务器内部端口为 9000，外部端口为 9876，我必须将这些行添加到我的

quasar.config.js

:

extendViteConf(viteConf) {
  viteConf.server.hmr = {
    port: 9000,
    clientPort: 9876
  }
}

为了让 nginx 正确处理 websocket 协议请求，我将以下行添加到配置的

location /

部分：

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'Upgrade';