Vue编译报错无效/缺失结束标签但标签已正确闭合如何排查

问题原因 #

这两个报错是配套出现的：Vue模板编译器没能正确识别<q-item>的开始标签边界，所以先抛出「缺少结束标签」的错误，后续遇到</q-item>时找不到对应的有效开始标签，就会再抛出「无效结束标签」的错误，和<q-list>的闭合没有关系。

解决步骤 #

• 首先修复<q-item>的属性换行问题，把分散在两行的属性合并到同一行，避免换行符/不可见字符干扰编译器识别标签边界：
  原错误写法：

<q-item  @click="setCourse(course)" v-for="course in program.courses" 
:key="course.title" clickable v-ripple >

修改后写法：

<q-item @click="setCourse(course)" v-for="course in program.courses" :key="course.title" clickable v-ripple>

• 检查<q-item>内部所有子标签的闭合情况，确认所有<q-item-section>、<i>等标签都有对应的正确闭合标签，标签名没有拼写错误。
• 排查文件编码异常：确认当前Programs.vue文件的编码为UTF-8无BOM格式，也可以将文件内容全选复制到纯文本编辑器去格式后再贴回原文件，清除可能存在的不可见特殊字符。
• 最小范围验证：如果修改后仍然报错，可以先注释掉<q-list>内部的所有内容，只保留最简结构测试编译是否正常：

<q-list v-if="program.courses && program.courses.length > 0">
  <q-item>测试内容</q-item>
</q-list>
<q-banner inline-actions rounded class="bg-orange text-white" v-else>
  测试提示
</q-banner>

如果测试结构可以正常编译，再逐步恢复原有内容即可定位具体触发报错的代码位置。

内容的提问来源于stack exchange，提问作者Dominik Zi