Vue.js组件在IE11中抛出无效字符语法错误求助

我之前在做Vue项目兼容IE11的时候也踩过类似的坑，结合你给出的报错信息，这个「Invalid character」语法错误大概率和ES6+语法未转译、特殊字符或者兼容性polyfill缺失有关，给你梳理几个最值得优先排查的方向：

• ES6+语法未被转译为IE11支持的ES5
  IE11对ES6及以上的语法完全不买账——箭头函数、模板字符串、let/const这些我们写起来顺手的特性，在IE11里都会触发语法错误。你可以检查下项目的转译配置：

  • 如果用Vue CLI，确认vue.config.js里的transpileDependencies数组有没有包含所有需要转译的依赖（不少第三方npm包本身是用ES6写的，默认不会被Vue CLI自动转译）。
  • 如果是手动配置webpack，要确保babel-loader的规则覆盖了所有.js文件，包括node_modules里的部分依赖；同时babel的预设要配置@babel/preset-env，并明确指定目标浏览器包含IE11。

• 代码中存在IE11无法识别的特殊字符
  报错里的「Invalid character」也可能是代码里混入了IE11认不出来的字符，比如：

  • 不小心复制粘贴进来的全角空格、逗号或引号
  • 一些特殊符号（比如∆、≈这类）
  • 未被转译的ES6模板字符串（${}语法）
    你可以直接定位到报错里的app.js:6:21534这个位置，把对应的代码格式化后仔细检查，或者用ES5转译工具把这段代码转译后对比差异，很容易就能找到问题。

• Promise兼容性缺失
  IE11本身没有原生Promise支持，虽然Vue会自带Promise的polyfill，但如果你的项目里手动引入了其他Promise实现，或者polyfill没有正确加载，也可能触发这类报错。你可以确认：

  • 项目入口文件有没有正确引入core-js/stable和regenerator-runtime/runtime（如果用babel的话）
  • babel.config.js里有没有设置useBuiltIns: 'usage'，让babel自动按需引入所需的polyfill

• 第三方依赖的兼容性问题
  有些第三方Vue组件库或工具库没做IE11兼容，它们的代码里可能藏着IE不支持的语法或字符。你可以尝试：

  • 暂时移除最近新增的第三方依赖，看看报错是否消失，逐步排查出问题依赖
  • 查看该依赖的官方文档，确认它是否支持IE11，如果支持，有没有特殊的配置要求

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