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

Question

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

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

import { defineNuxtConfig } from 'nuxt'

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

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

想知道是我配置错误还是 Nuxt3 还不能实现？

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

Answer 1

这个问题是由 Vite（默认）使用端口 :24678 引起的，并且被 Docker 阻止，导致 Vite 出错并 hard-reload。要解决此问题，您只需确保相关端口公开且可访问。

根据这个 GitHub issue 你可以将以下内容添加到你的 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',
    }
  }
}

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

How to config vite HMR port in Nuxt3 config?

nuxt.js

vite