Vue エラー: Vue アプリに予期しないトークン '<'

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

WBOY

リリース： 2023-08-20 21:17:19

オリジナル

1438 人が閲覧しました

$Vue报错：Unexpected token \'<\' in Vue app – 如何解决？$

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

終了タグがありません

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

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

ログイン後にコピー

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

Failed to compile.

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

ログイン後にコピー

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

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

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

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

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

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

ログイン後にコピー

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

Failed to compile.

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

Failed to compile.

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

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。