如何解决Vue+TS项目中ESLint提示Unexpected Token解析错误的问题

云上老周

2026-10-5

报错原因

这个报错不是代码逻辑错误，分两种场景触发：

场景1：判断逻辑写在Vue <template> 标签内
Vue模板的HTML解析器会把表达式里的>字符识别为HTML标签的闭合标记，因此会抛出该解析错误，这是Vue模板语法的规则限制，不是ESLint配置问题。
场景2：判断逻辑写在<script>标签内
如果这段代码是写在脚本块里，说明你的项目没有正确配置Vue+TS的ESLint解析规则，解析器把TS代码当成了模板内容解析导致报错。

解决方案

针对场景1（逻辑在模板内）

三种可选方案，按优先级推荐：

优先把判断逻辑抽离到脚本块的计算属性/方法中，模板直接调用封装后的属性，示例：

// script 中
const hasFile = computed(() => target.files?.length > 0)

<!-- template 中 -->
<div v-if="hasFile">...</div>

把>转义为HTML实体>，直接写在表达式中：v-if="files && files?.length > 0"
把>用花括号包裹为表达式文本：v-if="files && files?.length {'>'} 0"

针对场景2（逻辑在脚本内）

按顺序检查配置：

确认script标签已声明TS语言属性：<script lang="ts"> 或 <script setup lang="ts">
替换代码中的尖括号类型断言为as语法，避免尖括号和标签解析规则冲突：

// 替换前
const target:HTMLInputElement = <HTMLInputElement>e.target
const res = JSON.parse(<string>reader.result)
// 替换后
const target = e.target as HTMLInputElement
const res = JSON.parse(reader.result as string)

检查ESLint配置是否正确配置了Vue+TS解析器，核心配置示例如下：

// .eslintrc.js 核心片段
module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ]
}