Vue-Fehler: Unerwartetes Token „<' in der Vue-App – wie lässt sich das Problem beheben?

Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen und Single-Page-Anwendungen. Möglicherweise sind Sie jedoch frustriert und verwirrt, wenn in Ihrer Vue-App eine Fehlermeldung wie „Unerwartetes Token ‚<‘“ angezeigt wird. In diesem Artikel werden einige mögliche Gründe für diesen Fehler aufgeführt und erläutert, wie er behoben werden kann.

1. Fehlendes schließendes Tag

In einer Vue-Vorlage muss jedes Tag ein entsprechendes schließendes Tag haben. Wenn Ihr HTML Tags enthält, die nicht ordnungsgemäß geschlossen sind, erkennt Vue den Fehler und gibt die Fehlermeldung „Unerwartetes Token ‚<‘“ zurück.

Wenn Sie beispielsweise das folgende nicht geschlossene Tag haben:

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

Dies führt zu der Fehlermeldung:

Failed to compile.

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

Workaround: Stellen Sie sicher, dass in der Vue-Vorlage alle Tags über ein entsprechendes schließendes Tag verfügen und dass die Verschachtelung der Tags erfolgt richtig . Im obigen Beispiel sollte das fehlende schließende

-Tag am Ende des Codes hinzugefügt werden.

2. HTML-Tags im JavaScript-Code verwenden

In Vue-Anwendungen können HTML-Tags nur im Vorlagenteil und nicht im JavaScript-Code verwendet werden. Wenn Sie ein HTML-Tag im JavaScript-Code einer Vue-Komponente verwenden, kann Vue es nicht korrekt analysieren und gibt daher die Fehlermeldung „Unerwartetes Token ‚<‘“ zurück.

Wenn Ihr Komponentencode beispielsweise die folgende Zeile enthält:

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

Dies führt zu der Fehlermeldung:

Failed to compile.

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

Problemumgehung: Vermeiden Sie im JavaScript-Code der Vue-Komponente die Verwendung von HTML-Tags. Wenn Sie HTML-Markup verwenden müssen, können Sie es mit der v-html-Direktive von Vue rendern.

3. Eingeführtes fehlerhaftes HTML-Dokument

Wenn Sie ein fehlerhaftes HTML-Dokument in Ihre Vue-Anwendung einfügen, das ein nicht unterstütztes Tag oder ein falsch codiertes Tag enthält, kann Vue es nicht richtig analysieren und gibt daher „Unerwartetes Token“ < '" Fehlermeldung.

Wenn Sie beispielsweise mit der folgenden Zeile das falsche HTML-Dokument in Ihre Vue-Komponente einfügen:

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

Dies führt zu der Fehlermeldung:

Failed to compile.

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

Abhilfe: Stellen Sie sicher, dass Sie das richtige HTML-Dokument in Ihre Vue-Anwendung einführen und Checken Sie das Dokument ein. Es liegt ein falsches Markup oder eine falsche Kodierung vor.

4. Vue-Anwendung ist nicht richtig konfiguriert

Wenn die Vue-Anwendung nicht richtig konfiguriert ist, beispielsweise weil die notwendigen Plugins oder Bibliotheken nicht richtig geladen werden, erscheint die Fehlermeldung „Unerwartetes Token '<'“.

Wenn für Ihre Vue-Anwendung beispielsweise der Vue-Router nicht richtig konfiguriert ist, kann die folgende Fehlermeldung angezeigt werden:

Failed to compile.

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

Problemumgehung: Stellen Sie sicher, dass Ihre Vue-Anwendung richtig konfiguriert ist und die erforderlichen Plugins und Bibliotheken geladen sind. Stellen Sie im obigen Beispiel sicher, dass der Vue Router korrekt geladen ist.

Zusammenfassung

Wenn in einer Vue-Anwendung die Fehlermeldung „Unerwartetes Token '<'“ auftritt, kann dies mehrere mögliche Gründe haben. Dieses Problem kann durch eine sorgfältige Prüfung der Vue-Vorlagen, die Vermeidung der Verwendung von HTML-Tags im JavaScript-Code, die Einführung einer korrekten HTML-Dokumentation und die korrekte Konfiguration der Vue-Anwendung gelöst werden. Wenn Sie diese möglichen Ursachen ausschließen, sollten Sie in der Lage sein, das Problem zu beheben und Ihre Vue-Anwendung weiterzuentwickeln.

Das obige ist der detaillierte Inhalt vonVue-Fehler: Unerwartetes Token „<' in der Vue-App – wie lässt sich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!