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

1. 问题背景

在开发Vue应用时，我们可能会遇到“Unexpected token '<'”错误，该错误通常会发生在模板(html)中使用了未转义的小于号(<)或大于号(>)时。

2. 问题分析

在Vue的应用中，我们通常会使用模板作为视图层，而这个错误往往会在模板文件中出现。在Vue模板中，使用尖括号时，Vue会自动解释这些标签，并将它们渲染到页面上，但是有些情况下，我们需要在模板中使用尖括号，比如在字符串中插入html标签或者使用逻辑语句。这时如果没有对尖括号进行转义，就会触发“Unexpected token '<'”错误。

3. 解决方案

3.1 转义

一种解决方案是对尖括号进行转义。在Vue模板中，可以使用“v-html”指令将字符串作为原始HTML输出到页面上，同时可以使用“<”或“<”表示小于号，“>”或“>”表示大于号。例如：

<template>
  <div v-html="content"></div>
</template>
<script>
export default {
  data() {
    return {
      content: '<strong>Hello</strong> World!'
    }
  }
}
</script>

在这个例子中，我们使用“v-html”指令将变量“content”的值作为原始HTML输出到页面上。而在“content”变量中，我们使用了“<”和“>”进行转义，这样就不会触发“Unexpected token '<'”错误了。

3.2 重新打包

另一种解决方案是对项目进行重新打包。在Vue项目中，我们通常会使用Webpack进行打包，而Webpack会将我们的所有代码打包成一个或多个Bundle文件。如果我们在打包模板文件时出现了“Unexpected token '<'”错误，可能是因为Webpack没有正确处理模板文件中的尖括号。在这种情况下，我们可以尝试重新打包项目，看看能否解决问题。

4. 结论

在Vue应用中，如果出现“Unexpected token '<'”错误，通常是因为模板文件中包含了未转义的小于号或大于号。为了解决这个问题，我们可以对尖括号进行转义，或者尝试重新打包项目。希望本文能够帮助大家解决类似的问题。