Ralat Vue: Token '<' yang tidak dijangka dalam apl Vue – bagaimana untuk menyelesaikannya?

Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna dan aplikasi satu halaman. Walau bagaimanapun, anda mungkin berasa kecewa dan keliru apabila anda mendapat mesej ralat seperti "Token tidak dijangka '<'" dalam apl Vue anda. Artikel ini akan memberikan beberapa kemungkinan sebab ralat ini dan menerangkan cara membetulkannya.

1. Tiada teg penutup

Dalam templat Vue, setiap teg mesti mempunyai teg penutup yang sepadan. Jika terdapat teg dalam HTML anda yang tidak ditutup dengan betul, Vue akan mengenali ralat tersebut dan mengembalikan mesej ralat "Token tidak dijangka '<'".

Sebagai contoh, jika anda mempunyai teg tidak tertutup berikut:

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

Ini akan mengakibatkan mesej ralat:

Failed to compile.

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

Penyelesaian: Pastikan dalam templat Vue semua teg mempunyai teg penutup yang sepadan dan sarang teg adalah betul . Dalam contoh di atas, teg penutup yang hilang

harus ditambahkan pada penghujung kod.

2. Menggunakan teg HTML dalam kod JavaScript

Dalam aplikasi Vue, teg HTML hanya boleh digunakan dalam bahagian templat dan tidak boleh digunakan dalam kod JavaScript. Jika anda menggunakan teg HTML dalam kod JavaScript komponen Vue, Vue tidak akan dapat menghuraikannya dengan betul, sekali gus mengembalikan mesej ralat "Token tidak dijangka '<'".

Sebagai contoh, jika kod komponen anda mengandungi baris berikut:

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

Ini akan mengakibatkan mesej ralat:

Failed to compile.

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

Penyelesaian: Dalam kod JavaScript komponen Vue, elakkan menggunakan teg HTML. Jika anda perlu menggunakan penanda HTML, anda boleh menggunakan arahan v-html Vue untuk memaparkannya.

3. Memperkenalkan Dokumen HTML Buruk

Jika anda memperkenalkan dokumen HTML yang buruk dalam aplikasi Vue anda yang mengandungi teg yang tidak disokong atau teg yang dikodkan secara salah, Vue tidak akan dapat menghuraikannya dengan betul, sekali gus mengembalikan "Token yang tidak dijangka '< '" mesej ralat.

Sebagai contoh, jika anda memperkenalkan dokumen HTML yang salah dalam komponen Vue anda dengan baris berikut:

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

Ini akan mengakibatkan mesej ralat:

Failed to compile.

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

Penyelesaian: Pastikan anda memperkenalkan dokumen HTML yang betul dalam aplikasi Vue anda dan semak dalam dokumen Terdapat sebarang penandaan atau pengekodan yang salah.

4. Aplikasi Vue tidak dikonfigurasikan dengan betul

Jika aplikasi Vue tidak dikonfigurasikan dengan betul, contohnya, pemalam atau perpustakaan yang diperlukan tidak dimuatkan dengan betul, mesej ralat "Token tidak dijangka '<'" akan muncul.

Sebagai contoh, jika aplikasi Vue anda tidak mempunyai Penghala Vue dikonfigurasikan dengan betul, mesej ralat berikut mungkin muncul:

Failed to compile.

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

Penyelesaian: Pastikan aplikasi Vue anda dikonfigurasikan dengan betul dan mempunyai pemalam dan perpustakaan yang diperlukan dimuatkan. Dalam contoh di atas, pastikan Penghala Vue dimuatkan dengan betul.

Ringkasan

Apabila menghadapi mesej ralat "Token tidak dijangka '<'" dalam aplikasi Vue, mungkin terdapat beberapa sebab yang mungkin. Masalah ini boleh diselesaikan dengan memeriksa templat Vue dengan teliti, mengelakkan penggunaan teg HTML dalam kod JavaScript, memperkenalkan dokumentasi HTML yang betul dan mengkonfigurasi aplikasi Vue dengan betul. Dengan menolak kemungkinan punca ini, anda seharusnya dapat menyelesaikan isu tersebut dan terus membangunkan aplikasi Vue anda.

Atas ialah kandungan terperinci Ralat Vue: Token '<' yang tidak dijangka dalam apl Vue – bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!