Nuxt 3出现Illegal tag name错误，Vue3/Vite下如何定位报错源？

一、快速定位报错组件（不用全量排查） #

• 翻终端完整日志：Nuxt的报错信息常被截断，别只看最后一行，往上翻终端输出，大概率能找到具体的组件路径。
• 借助浏览器工具：打开浏览器开发者工具的Console面板，查看完整调用栈；同时启用Nuxt DevTools（浏览器右上角的Nuxt图标），在Components面板结合报错时间，排查最近渲染的组件。
• 优先查最近改动的文件：这个错误基本出自你近期编辑过的Vue文件，先从这些文件入手效率最高。
• 注释缩小范围：如果以上方法没找到，就临时注释pages目录下的部分页面组件，重启Nuxt服务，看错误是否消失，逐步锁定问题文件。

二、错误修复核心方法 #

这个错误本质是Vue模板解析到了非法的<符号，分两种情况处理：

• 要显示<字符：别直接写<，改成<，或者用插值语法 <span>{{ '<' }}</span>；若为动态内容，可使用v-html（注意防范XSS风险）。
• 标签语法错误：检查组件模板里的HTML标签，比如有没有手误写成<d<iv>这类格式，确保标签名合法、没有多余的<符号混入。

内容的提问来源于stack exchange，提问作者Marian Klühspies