vue-cli 3.x 在IE11 报错 问题

Question

问题描述

IE11下报如下错误:
[vuex] vuex requires a Promise polyfill in this browser.

问题出现的环境背景及自己尝试过哪些方法

开发一直在 chrome 下没有发现出问题，今天在ie下测试发现报了兼容性错误，
类似symbol不存在的错
于是就在项目中尝试添加 polyfill
根据官方文档：

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

这里有个坑！！ presets: [[]],两个括号..

然后就出现了这个错误：[vuex] vuex requires a Promise polyfill in this browser.

然后翻了Stack Overflow 和 vue-cli github issue
发现 vue-cli issue 这个issue 跟我遇到的问题差不多，有两个解决方案：
1.

vue-class-component 的问题
vuejs/vue-class-component#283
暂时先回退 vue-class-component 到 6.2.0 可以解决问题

2.
Fixed in vue-class-component v6.3.2

然后我很懵逼，这个 vue-class-component 包怎么才能升级或回退呢.我找遍整个项目都没有找到这个包~~

然后又找到这个 issue
解决方案是 添加 import "es6-promise/auto" 尝试后依然无效..

最后尝试 升级 "@vue/cli-plugin-babel": "^3.1.1", 依然没有解决问题！

还有一个解决方案是 :

entry: {
    app: ["babel-polyfill", "./src/main.js"]
}

这个项目是用的 vue-cli3 构建的 多页应用，总不能在没个 入口都配置一遍吧...

我最终妥协了，为每个页面入口都配置了:
{ entry: [ '@babel/polyfill', 'xxx/index.js' ]
结果被无情的拒绝：TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object

我现在很绝望...

Answer 1

IE9如何兼容axios啊，使用es6-promise无效啊，老的vue-cli是可以的

Answer 2

这边文章很全，会帮上你

https://ligang.blog.csdn.net/...

Answer 3

我也遇到了这个问题，想问下大大最后怎么解决的呢？

Answer 4

我的问题是报语法错误 SCRIPT1002: 语法错误

Answer 5

入口文件最上方require('es6-promise/auto')

Answer 6

我也遇到这个问题，我的现象如下：
1、在多页面应用中（vue.config.js配置的）且在开发态会出现这种问题
2、垫片只被打进了某个页面的js中，其它页面js没有垫片
3、生成环境打包时会将公共开源软件抽取成单独js，此时所有页面中都会引用该公共js，所以生产环境不会出现问题

猜测可能是vue/cli的bug

Answer 7

先下载这个包 babel-polyfill
然后main.js 引入这个 import 'babel-polyfill'
我2.+这么偷懒过 你试试可行不可以

至于你上面说的包回退 可以把现在包(uninstall) 卸载 制定version去下载包

//vue.config.js
module.exports = {
  chainWebpack:  config => {
    config
    .entry('index')
    .add('babel-polyfill')
  }
}

Answer 8

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
         // promise polyfill alone doesn't work in IE,
          // needs this as well. see: #1642
          'es6.array.iterator',
          // this is required for webpack code splitting, vuex etc.
          'es6.promise',
          // #2012 es6.promise replaces native Promise in FF and causes missing finally
          'es7.promise.finally'
          'es6.symbol'
      ]
    }]
  ]
}

Answer 9

最终解决方案是：
babel.config.js

module.exports = {
  // presets: [ '@vue/app' ],
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ]
}

在入口文件最上方添加 import '@babel/polyfill'

实测能够兼容到IE10

然后在 public/index.html(模板) head 添加：
<meta name="renderer" content="webkit|ie-comp|ie-stand">
首先强制浏览器使用webkit内核（极速内核）
如果浏览器没有webkit内核，则按照用户浏览器所支持的最新的ie的trident内核渲染页面（ie兼容内核）
否则按照当前浏览器的标准内核渲染（ie标准内核）

注：我认为这种方案比较hack.. 会包含了一些没有用到的polyfill 所以最终的包大小可能会增加。

vue-cli-service build --modern

vue-cli 3.x有个 现代模式 测试后发现ie可以了，chrome不行..这个下来需要继续测试。

感谢 @努力学会微笑，及其他答友。