如何在Nuxt3配置中配置vite HMR端口？

Question

我在 Docker compose 设置中使用 Nuxt3，其中端口 8001 是通过 nginx 反向代理通道运行 Nuxt3 的节点容器的可访问端口。

我的 nuxt.config.ts 看起来像这样：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                clientPort: 8001,
            }
        }
    }
})

不知何故，Vite 的 HMR 的 clientPort 设置似乎没有被 Nuxt3 拾取。该页面在开发设置中不断重新加载。

知道我是否配置错误或者这在 Nuxt3 中尚不可能吗？

在与 Vue 类似的设置中，vite.config.js 中的此设置是否正常工作？

Answer 1

该问题是由 Vite（默认情况下）使用端口引起的，:24678并且被 Docker 阻止，导致 Vite 出错并硬重载。要解决此问题，您只需确保相关端口已公开且可访问。

根据此GitHub 问题，您可以将以下内容添加到 Docker 撰写文件中（特别是 Nuxt3 服务，而不是nginx 服务）：

# Your Nuxt 3 service

  ports:
    - "24678:24678" # or in your case: - "8001:8001"

您可能还需要将vite.config.js文件添加到 Nuxt3 文件夹的根目录中，其中包含以下内容：

export default {
  server: {
    hmr: {
      protocol: 'ws',
      host: '0.0.0.0',
    }
  }
}