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. JavaScript 코드에서 HTML 태그 사용하기

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는 이를 올바르게 구문 분석할 수 없으므로 "예기치 않은 토큰'< '" 에러 메시지.

예를 들어 다음 줄을 사용하여 Vue 구성 요소에 잘못된 HTML 문서를 삽입하는 경우:

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

이로 인해 오류 메시지가 표시됩니다.

Failed to compile.

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

해결 방법: Vue 애플리케이션에 올바른 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!