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

super_god
  • 302

问题描述

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 Overflowvue-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

我现在很绝望...

回复
阅读 11.5k
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不行..这个下来需要继续测试。

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

// 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'
      ]
    }]
  ]
}
先下载这个包 babel-polyfill
然后main.js 引入这个 import 'babel-polyfill'
我2.+这么偷懒过 你试试可行不可以

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

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

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

一箭中的
  • 2
新手上路,请多包涵

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

猜测可能是vue/cli的bug

Zeco的小小把戏
  • 1
新手上路,请多包涵

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

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

sanguomi
  • 4
新手上路,请多包涵

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

你知道吗?

宣传栏