Vue エラー: Vue アプリに予期しないトークン '<' – 解決方法は?

Vue.js は、ユーザー インターフェイスやシングルページ アプリケーションを構築するための人気のある JavaScript フレームワークです。ただし、Vue アプリで「予期しないトークン '<'」のようなエラー メッセージが表示されると、イライラしたり混乱したりするかもしれません。この記事では、このエラーの考えられる原因をいくつか示し、その解決方法を説明します。

1. 終了タグがありません

Vue テンプレートでは、各タグに対応する終了タグが必要です。 HTML 内に正しく閉じられていないタグがある場合、Vue はエラーを認識し、「予期しないトークン '<'」エラー メッセージを返します。

たとえば、次の閉じられていないタグがある場合:

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

これにより、エラー メッセージが表示されます:

Failed to compile.

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

回避策: Vue テンプレートにすべてのタグが含まれていることを確認してください。対応する終了タグがあり、タグのネストが正しい。上の例では、欠落している終了タグ

をコードの最後に追加する必要があります。

2. HTML タグは JavaScript コードで使用されます

Vue アプリケーションでは、HTML タグはテンプレート部分でのみ使用でき、JavaScript コードでは使用できません。 Vue コンポーネントの JavaScript コードで HTML タグを使用すると、Vue はそれを正しく解析できず、「予期しないトークン '<'」エラー メッセージが返されます。

たとえば、コンポーネント コードに次の行が含まれている場合:

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

これにより、エラー メッセージが表示されます:

Failed to compile.

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

回避策: Vue コンポーネントの JavaScript コード内、HTML タグの使用は避けてください。 HTML マークアップを使用する必要がある場合は、Vue の v-html ディレクティブを使用してレンダリングできます。

3. 不正な HTML ドキュメントが導入されました

サポートされていないタグや正しくエンコードされていないタグを含む不正な HTML ドキュメントを Vue アプリケーションに導入した場合、Vue は解析できません正しく実行されないため、「予期しないトークン '<'」エラー メッセージが返されます。

たとえば、次の行を含む不正な HTML ドキュメントを Vue コンポーネントに導入すると、

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

これにより、エラー メッセージが表示されます:

Failed to compile.

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

回避策: Makeプログラムは正しい HTML ドキュメントをインポートし、ドキュメントに不正なマークアップやエンコーディングがないかチェックします。

4. Vue アプリケーションが正しく構成されていません

Vue アプリケーションが正しく構成されていない場合 (たとえば、必要なプラグインやライブラリが正しく読み込まれていない場合)、「予期しないトークン」が表示されます。 ' というエラー メッセージが表示されます。

たとえば、Vue アプリケーションに Vue Router が正しく設定されていない場合、次のエラー メッセージが表示されることがあります:

Failed to compile.

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

回避策: Vue アプリケーションが適切に設定され、必要なプラグインが読み込まれていることを確認してください。そして図書館。上の例では、Vue Router が正しくロードされていることを確認してください。

概要

Vue アプリケーションで「予期しないトークン '<'」エラー メッセージが表示された場合は、いくつかの理由が考えられます。この問題は、Vue テンプレートを注意深く検査し、JavaScript コードでの HTML タグの使用を回避し、正しい HTML ドキュメントを導入し、Vue アプリケーションを正しく構成することで解決できます。これらの考えられる原因を除外することで、問題を解決し、Vue アプリケーションの開発を続行できるはずです。

以上がVue エラー: Vue アプリに予期しないトークン '<' – 解決方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。