Nuxt3 HMR 无法工作，需要重新加载页面才能触发 HMR

Question

我已经安装并运行了 Nuxt3

npx nuxi init <project-name>
cd <project-name>
npm i
npm run dev

这出现在控制台中：

Nuxi 3.0.0                                                                                                                                                                                                                                                    09:52:01
Nuxt 3.0.0 with Nitro 1.0.0                                                                                                                                                                                                                                   09:52:01
                                                                                                                                                                                                                                                              09:52:01
  > Local:    http://localhost:3000/ 
  > Network:  http://172.17.181.194:3000/

✔ Nitro built in 374 ms                                                                                                                                                                                                                                 nitro 09:52:03
ℹ Vite client warmed up in 1341ms                                                                                                                                                                                                                             09:52:03

在 app.vue 中进行更改并点击保存后，没有任何反应。

然后，当我在 Chrome 中单击“重新加载”时，这会出现在控制台中，并且页面显示正确的数据：

✔ Vite server hmr 6 files in 20.051ms 09:52:30

我有节点 v18.3.0。 在节点 v16.15.1 上尝试了相同的过程。

Answer 1

我必须将 vite.server.hmr.port 从 3000 更改为不同的端口

nuxt.config.ts

export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                port: 3008
            }
        }
    }
})

显然端口 3000 已被使用。

Answer 2

我花了几个小时尝试不同的设置，但问题是 - Nuxt 忽略了你的 hmr 设置。 (Nuxt 3.8.2) 所以你只需要在 hook 中扩展 vite 配置即可：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  ssr: false,
  css: [
    'bootstrap/dist/css/bootstrap.min.css',
    '~/assets/scss/main.scss',
  ],
  vite: {
    server: {
      // In my case I use Nginx reverse proxy
      // with self signet certificate (mkcert)
      // so I just want this works on localhost:3000
      // but these settings ignoring. You can check hmr is false
      // in 'vite:configResolved' hook
      // And the most efficient and elegant way to fix it is
      // override vite config in 'vite:extendConfig' hook below
      hmr: {
        protocol: 'ws',
        host: 'localhost',
      },
    },
  },
  hooks: {
    'vite:extendConfig' (viteInlineConfig, env) {
      viteInlineConfig.server = {
        ...viteInlineConfig.server,
        hmr: {
          protocol: 'ws',
          host: 'localhost',
        },
      }
    },
  },
})