Vue IE11报错

Question

问题:
vue-cli3.0打包后用IE11打包报错
报错如下:
SCRIPT1006: 缺少 ')'
chunk-vendors.0e4045c9.js (221,12985)

尝试解决的办法:
在网上百度的 都说要配置babel/polyfill,项目中已经下载,并且引用了
1.在main.js中引入了

import 'babel-polyfill';

2.在babel.config.js中配置了

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

3.package.json

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-unit-jest": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "babel-polyfill": "^6.26.0",
    "es6-promise": "^4.2.8",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^6.2.0",
    "lint-staged": "^9.5.0",
    "postcss-pxtorem": "^5.1.1",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11"
  },

这么修改后打包到IE中还是报错,请问有大佬遇到过这种情况吗?

Answer 1

兼容已修复,原因是使用的某个插件不兼容IE导致的 解决方法:在vue.config中配置:
transpileDependencies: [

'resize-detector'
'使用的插件'

],

Answer 2

一、新建.browserslistrc文件, 告诉webpack你想适配的浏览器。

> 1%
iOS >= 9
Android >= 4.4
not ie <= 8

二、你用的是vue-cli4, babel.config.js可以不用做额外配置, 默认是用的useBuiltIns为usage

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
    ],
};

三、 也不用在main.ts中引入babel了
四、 在vue.config.js中配置transpileDependencies
transpileDependencies这个数组里写上你第三方依赖库里没有被编译成es5的包名, 比如我项目中引用了query-string, query-string自己依赖了'split-on-first','strict-uri-encode', 而这俩包都没有被转移为es5, 所以需要在transpileDependencies数组中罗列出来

module.exports = {
    publicPath,
    filenameHashing: true,
    productionSourceMap: false,
    parallel: false,
    transpileDependencies: [
        'axios',
        'query-string',
        'eventemitter3',
        'vue-clipboard2',
        'split-on-first',
        'strict-uri-encode',
        'vue-lazyload',
    ],
};

五、 最后可以先本地编译一下, 在编译出的dist文件夹里全局查找一下有没有'const'这个关键词, 如果有, 说明没有转义好, 就去找这个const出现的代码位置, 确认是哪个包没有被转义。
六、 如果查找dist里不存在const或者let这种es6的关键字了, 就说明没问题了。

Answer 3

看名字里有 vendor，应该是某个第三方库代码里还有 es6 语法的代码，在 babel 配置里给他加上去就行