Vue2迁移Vue3时遭遇VueCompilerError非法标签名问题求助

问题分析 #

报错提示Illegal tag name. Use '<' to print '<'，虽指向aria-describedby属性行，但本质是Vue 3模板编译器对HTML语法校验更严格，常见诱因包括：

• 模板中存在隐藏的未转义特殊字符（如<）
• Vue主版本与vue/compat版本不匹配
• 编译工具链（Laravel Mix + vue-loader）的配置或缓存问题

解决方案 #

• 修复模板代码
  打开edit_transfer.vue文件，定位到报错的第721行（对应代码片段的第378行），手动重新输入aria-describedby="OrderTax-feedback"这一行。复制粘贴操作可能带入不可见的控制字符，手动重写可规避这类问题。

• 对齐Vue与vue/compat版本
  当前vue@3.2.36与vue/compat@3.3.2跨小版本存在兼容性风险，将vue/compat降级至与Vue主版本一致的3.2.x版本：

  npm install vue/compat@3.2.36 --save-dev
  

• 校准Laravel Mix的Vue 3配置
  确保webpack.mix.js中正确配置Vue 3及compat模式：

  const mix = require('laravel-mix');
  
  mix.js('resources/src/js/app.js', 'public/js')
     .vue({
        version: 3,
        compilerOptions: {
           compatConfig: {
              MODE: 2
           }
        }
     });
  

• 清理编译缓存

  1. 删除node_modules和package-lock.json文件
  2. 重新安装依赖：npm install
  3. 清理Laravel Mix编译产物：npm run clean（或手动删除public/js下的编译文件）
  4. 重新编译项目：npm run dev

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