Erreur Vue : jeton inattendu « < » dans l'application Vue – comment le résoudre ?

Vue.js est un framework JavaScript populaire pour créer des interfaces utilisateur et des applications d'une seule page. Cependant, vous pouvez vous sentir frustré et confus lorsque vous recevez un message d'erreur tel que « Jeton inattendu '<' » dans votre application Vue. Cet article fournira quelques raisons possibles de cette erreur et expliquera comment la corriger.

1. Balise de fermeture manquante

Dans les modèles Vue, chaque balise doit avoir une balise de fermeture correspondante. S'il y a des balises dans votre code HTML qui ne sont pas correctement fermées, Vue reconnaîtra l'erreur et renverra un message d'erreur « Jeton inattendu '<' ».

Par exemple, si vous avez la balise non fermée suivante :

<template>
  <div>
    <h1>Welcome</h1>
    <p>This is my website.
  </div>
</template>

Cela entraînera le message d'erreur :

Failed to compile.

...Unexpected token '<' in ...

Solution de contournement : assurez-vous que dans le modèle Vue, toutes les balises ont une balise de fermeture correspondante et que l'imbrication des balises est correct . Dans l'exemple ci-dessus, la balise de fermeture

manquante doit être ajoutée à la fin du code.

2. Utilisation des balises HTML dans le code JavaScript

Dans les applications Vue, les balises HTML ne peuvent être utilisées que dans la partie modèle et ne peuvent pas être utilisées dans le code JavaScript. Si vous utilisez une balise HTML dans le code JavaScript d'un composant Vue, Vue ne pourra pas l'analyser correctement, renvoyant ainsi un message d'erreur « Jeton inattendu '<' ».

Par exemple, si le code de votre composant contient la ligne suivante :

export default {
  data() {
    return {
      message: "<h1>Welcome to my website!</h1>"
    }
  }
}

Cela entraînera le message d'erreur :

Failed to compile.

...Unexpected token '<' in ...

Solution : Dans le code JavaScript du composant Vue, évitez d'utiliser des balises HTML. Si vous devez utiliser le balisage HTML, vous pouvez utiliser la directive v-html de Vue pour le restituer.

3. Mauvais document HTML introduit

Si vous introduisez un mauvais document HTML dans votre application Vue qui contient une balise non prise en charge ou une balise mal codée, Vue ne pourra pas l'analyser correctement, renvoyant ainsi "Jeton inattendu '< '"Message d'erreur.

Par exemple, si vous introduisez le mauvais document HTML dans votre composant Vue avec la ligne suivante :

<template>
  <div>
    <object data="path/to/wrong/file.html"></object>
  </div>
</template>

Cela entraînera le message d'erreur :

Failed to compile.

...Unexpected token '<' in ...

Solution de contournement : assurez-vous d'introduire le bon document HTML dans votre application Vue et vérifier dans le document Il y a un balisage ou un encodage incorrect.

4. L'application Vue n'est pas configurée correctement

Si l'application Vue n'est pas configurée correctement, par exemple, les plugins ou bibliothèques nécessaires ne sont pas chargés correctement, un message d'erreur "Jeton inattendu '<'" apparaîtra.

Par exemple, si votre application Vue n'a pas configuré correctement Vue Router, le message d'erreur suivant peut apparaître :

Failed to compile.

...Unexpected token '<' in ...

Solution de contournement : assurez-vous que votre application Vue est correctement configurée et que les plugins et bibliothèques nécessaires sont chargés. Dans l'exemple ci-dessus, assurez-vous que Vue Router est correctement chargé.

Résumé

Lorsque vous rencontrez le message d'erreur « Jeton inattendu '<' » dans une application Vue, il peut y avoir plusieurs raisons possibles. Ce problème peut être résolu en inspectant soigneusement les modèles Vue, en évitant l'utilisation de balises HTML dans le code JavaScript, en introduisant une documentation HTML correcte et en configurant correctement l'application Vue. En excluant ces causes possibles, vous devriez être en mesure de résoudre le problème et de continuer à développer votre application Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!