Vue项目IE11报错SCRIPT1006: 缺少 ‘)’

• 网上许多解决方案都说IE需要安装 @babel/polyfill

yarn add @babel/polyfill --dev

• main.js引入

import '@babel/polyfill';

• 配置文件中设置

网上搜到一般都是 webpack 的 config 文件中配置入口文件

module.exports = {
    entry: {
        app: ['babel-polyfill', './src/main.js']
    },
}

但是我用的 Vue2.6.10, 默认没有 webpack 的配置文件,后来发现是 babel 的设置项,就在 babel.config.js 中设置的(也可以在 .babelrc 中设置)

module.exports = {
  presets: [
    [
      '@vue/app', {
        useBuiltIns: 'entry',
        polyfills: [
          'es6.promise',
          'es6.symbol',
          'es6.array.find-index',
          'es7.array.includes',
          'es6.string.includes',
        ]
      },
    ]
  ]
};

但是依然报错

• 还有说是function的参数设置了默认值

修改 function(name=”test”) 为 function(name)

依然报错

上面两种修改后,只是错误的报错行数不一样了

这次点开错误,发现报错位置在 resize-detector 的文件中

• 最终,新建vue.config.js,设置依赖包的语法转译

module.exports = {
  transpileDependencies: ['resize-detector']
}

IE中页面终于出现了

transpileDependencies 中的设置项,根据自己的项目需要来设置

后记:

• 网上搜到了另一个bable的设置方法,还没测试,先记录下来”stage-3″

entry – 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持的polyfill

{
  "presets": [
    [
      "env",
      {
        "useBuiltIns": "entry"
      }
    ],
    "stage-3"
  ]
}

参考:

Vue CLI 浏览器兼容性

https://zhuanlan.zhihu.com/p/38223218