Supprimer l'avertissement généré par pathMatch

Introduction

Dans ce projet, vous allez apprendre à résoudre un problème d'avertissement dans la bibliothèque vue-router 3.1.3. Le vue-router est une bibliothèque de routage populaire pour les applications Vue.js, et la version 3.1.3 avait un bogue qui générait un avertissement lorsque le paramètre pathMatch était une valeur vide. En suivant le guide étape par étape, vous serez capable de localiser le problème, corriger le code et reconstruire la bibliothèque pour résoudre l'avertissement.

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment identifier le problème dans le fichier params.js de la bibliothèque vue-router 3.1.3
• Comment corriger le code pour supprimer l'avertissement
• Comment reconstruire la bibliothèque vue-router 3.1.3 avec la correction
• Comment tester la version corrigée pour vous assurer que l'avertissement n'est plus affiché

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Dépanner et corriger les problèmes dans une bibliothèque tiers
• Comprendre l'importance de maintenir les dépendances à jour et de corriger les bogues connus
• Démontrez le processus de reconstruction d'une bibliothèque après avoir effectué des modifications au code
• Tester la fonctionnalité d'une bibliothèque pour vous assurer qu'elle fonctionne comme prévu

Résolution de l'avertissement dans Vue-Router 3.1.3

Pour commencer, regardez la structure de répertoire des fichiers sur la gauche comme suit :

├── vue-router-3.1.3
├── vue.js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez-le manuellement, cliquez sur "/nope/", puis cliquez sur "test" et ouvrez l'option Console dans la console du navigateur, vous verrez le message suivant :

[vue-router] missing param for named route "NotFound": Expected "0" to be defined

Dans cette étape, vous allez apprendre à corriger l'avertissement généré par le problème pathMatch dans le code vue-router 3.1.3.

1. Ouvrez le fichier vue-router-3.1.3/src/util/params.js.
2. Localisez le code à la ligne 28 qui provoque l'avertissement :

if (process.env.NODE_ENV !== "production") {
  warn(false, `missing param for ${routeMsg}: ${e.message}`);
}

3. Commentez l'appel de fonction warn pour supprimer l'avertissement :

if (process.env.NODE_ENV !== "production") {
  // warn(false, `missing param for ${routeMsg}: ${e.message}`)
}

Cela empêchera l'avertissement d'être affiché dans la console.

Rebuild and Test the Vue-Router 3.1.3 Project

Dans cette étape, vous allez reconstruire et tester le projet vue-router 3.1.3 après avoir corrigé l'avertissement.

1. Ouvrez un terminal et accédez au répertoire vue-router-3.1.3.
2. Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)
3. Une fois toutes les dépendances installées avec succès, exécutez la commande npm run build pour reconstruire et publier le projet. Cela générera une nouvelle version de la bibliothèque vue-router 3.1.3 avec la correction de l'avertissement.
4. Ouvrez la page Web 8080 dans votre navigateur.
5. Cliquez sur le lien "/nope/", puis cliquez sur le lien "test".
6. Ouvrez la console du navigateur et vérifiez que le message d'avertissement n'est plus affiché.

Félicitations! Vous avez réussi à corriger le problème d'avertissement dans la bibliothèque vue-router 3.1.3.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.