Vue error: Unexpected token '<' in Vue app – how to solve it?

Vue.js is a popular JavaScript framework for building user interfaces and single-page applications. However, you may feel frustrated and confused when you get an error message like "Unexpected token '

1. Missing closing tag

In a Vue template, each tag must have a corresponding closing tag. If there are tags in your HTML that are not properly closed, Vue will recognize the error and return an "Unexpected token '

For example, if you have the following unclosed tag:

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

This will result in the error message:

Failed to compile.

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

Workaround: Make sure that in the Vue template all tags have the corresponding closing tag, and the nesting of tags is correct. In the above example, the missing closing

tag should be added at the end of the code.

2. HTML tags are used in JavaScript code

In Vue applications, HTML tags can only be used in the template part and cannot be used in JavaScript code. If you use an HTML tag in the JavaScript code of a Vue component, Vue will not be able to parse it correctly, thus returning an "Unexpected token '

For example, if your component code contains the following line:

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

This will result in the error message:

Failed to compile.

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

Workaround: In the JavaScript code of the Vue component, avoid Use HTML tags. If you need to use HTML markup, you can use Vue's v-html directive to render it.

3. Introduced Bad HTML Document

If you have introduced a bad HTML document in your Vue application that contains unsupported tags or incorrectly encoded tags, Vue will not be able to parse it correctly, thus returning an "Unexpected token '

For example, if you introduce a bad HTML document in a Vue component with the following line:

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

This will result in the error message:

Failed to compile.

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

Workaround: Make sure to apply The program imports the correct HTML document and checks the document for any incorrect markup or encoding.

4. The Vue application is not configured correctly

If the Vue application is not configured correctly, for example, the necessary plugins or libraries are not loaded correctly, "Unexpected token ' will appear

For example, if your Vue application does not have the Vue Router configured correctly, the following error message may appear:

Failed to compile.

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

Workaround: Make sure your Vue application is properly configured and loaded Necessary plugins and libraries. In the example above, make sure the Vue Router is loaded correctly.

Summary

When encountering the "Unexpected token '

The above is the detailed content of Vue error: Unexpected token '<' in Vue app – how to solve it?. For more information, please follow other related articles on the PHP Chinese website!