HMR ne rafraîchit pas la page dans Nuxt 3

Si votre Nuxt 3 Hpas Module Reloading ne fonctionne pas, cela est probablement dû à un conflit avec vos ports clients. C’est généralement le problème si votre projet réside dans un conteneur Docker ou si vous développez à distance via SSH, soit avec VS Code, soit avec un autre éditeur.

Le premier endroit où rechercher un conflit de port est dans le journal de la console de développement du navigateur. Vous pouvez afficher les outils de développement en appuyant sur CTRL + MAJ + I ou alors F12.

Vérifiez l’erreur GET http://localhost:24678/_nuxt/net::ERR_CONNECITON_REFUSED

Si vous voyez l’erreur ci-dessus, vous aurez besoin d’ouvrir le port 24678, afin que le client Nuxt puisse communiquer avec votre serveur principal. Vous pouvez également configurer HMR pour qu’il utilise différents ports.

Changer le port HMR de Nuxt 3

Pour changer le port Nuxt 3 HMR, nous devrons éditer le nuxt.config.ts dossier.

export default defineNuxtConfig({
    vite: {
        server: {
            hmr: {
                 clientPort: 24600,
                 port: 24600
            }
        }  
    }
})

Dans le code ci-dessus, le clientPort et port les variables doivent être un port que vous avez déjà ouvert.

Transférer un port dans le code VS

Si vous utilisez VS Code, vous devrez peut-être ouvrir des ports supplémentaires pour que HMR fonctionne correctement. Une fois que vous avez configuré SSH à distance, vous devez ajouter une ligne à votre fichier de configuration SSH.

  • Frappé CTRL + MAJ + P
  • Taper Configuration SSH
  • Cliquez sur Remote-SSH : Ouvrir le fichier de configuration SSH
  • À l’intérieur de .ssh_config fichier, ajouter LocalForward 127.0.0.1:24678 127.0.0.1:24678

Le port par défaut pour Nuxt 3 HMR est 24678mais vous pouvez le remplacer par n’importe quel port tant que vous le faites correspondre au port HMR défini dans votre nuxt.config.ts dans la section ci-dessus.

Aide supplémentaire

Rien n’est pire que de mettre en place un tout nouveau projet et de casser quelque chose avant même d’avoir codé quoi que ce soit. Lors du démarrage d’un projet Nuxt 3, vous pouvez être immédiatement confronté à un problème avec le rechargement de votre module à chaud. Bien que cela ne soit pas critique pour le fonctionnement de votre projet, ne pas avoir de HMR ralentira considérablement votre temps de développement. Si le correctif ci-dessus ne vous a pas aidé et que vous rencontrez un problème plus spécifique avec votre HMR, consultez les problèmes publiés sur le Nuxt GitHub officiel. Assurez-vous de rechercher les problèmes publiés avant de publier l’un des vôtres.

Nous espérons que ce guide vous a aidé à résoudre votre problème. Consultez notre section JavaScript pour obtenir plus de correctifs, de conseils, d’astuces et plus encore.

Categorized in:

Guide,