Vue/Nuxt应用仅IE11报Failed to mount component错误如何定位？

可测试调试方向 #

• 排查语法兼容性细节
  重点检查你修改的子组件及关联文件中，IE11不支持的语法特性，即便同类特性在项目其他地方用过也要逐一确认：
  • 是否在对象字面量中使用了简写属性、扩展运算符，比如const data = {name}、{...oldData}，检查这部分代码是否被Babel正常转译
  • 模板中是否使用了v-slot缩写、动态插槽名、v-for解构、可选链?.、空值合并??这类IE11不兼容的语法
  • script代码中是否存在箭头函数作为prop默认值、data定义用箭头函数、块级作用域外使用const/let触发IE11变量提升异常的情况
• 排查组件导入导出格式问题
  • 确认修改的子组件使用export default正常导出，不存在多余的导出项或者导出格式错误，IE11对ES模块兼容性较差，导出格式异常会导致组件实例为undefined，直接触发render函数未定义的报错
  • 检查是否新增了异步组件导入的写法() => import('xxx')，IE11下异步组件加载解析超时、加载失败都可能抛出该报错，可以先改成同步导入验证
• 对比分支差异排查配置问题
  • 对比你和同事分支的所有代码改动，重点确认是否无意间修改了.babelrc、nuxt.config.js中的Babel配置、Polyfill配置，哪怕是符号、空格变动都可能导致配置加载异常
  • 检查是否新增了第三方依赖子模块的引用，即便整体项目依赖未变更，单独引入的未转译子模块也可能携带IE11不支持的语法
• 构建配置调整定位问题根源
  • 临时开启构建Sourcemap，在IE11开发者工具中打断点调试，查看报错时对应的组件实例内容，向上追溯找到实际加载失败的组件
  • 临时切换Nuxt为SPA模式打包测试，排除服务端渲染返回内容在IE11下解析异常的问题
• 排查模板HTML语法兼容问题
  • 检查是否使用了自定义组件自闭合写法，比如<my-comp />，IE11对单标签自定义组件解析存在bug，改为<my-comp></my-comp>验证
  • 检查模板属性是否使用了camelCase写法，IE11会自动将HTML属性转为小写，导致props匹配失败、组件实例异常
  • 确认组件name属性未使用特殊字符、不存在和其他全局组件重名的情况，IE11下重名组件注册会被覆盖，导致拿到无效组件实例

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