Vue 中使用 babel-polyfill 来兼容低版本浏览器

报错示例

使用了 Vue 以及用 axios 来发请求，在谷歌浏览器上面，预览是没有问题的：
（下图中红色内容，是我调接口获取到的内容，然后显示在页面上）

但是在 IE 浏览器下，却没有看到接口获取的内容显示在页面上

F12，看了一下错误信息：

包括安卓5以下的设备，也会有这种情况。

背景知识

Babel 默认只转换新的 JavaScript 句法，而不转换新的 API，比如 Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。Babel 默认不转码的 API 非常多，详细清单可以查看 definitions.js 文件。

原因

原因就是 axios 是基于 promise 来实现的，IE 和低版本的设备不支持 promise。

解决方案

方案一、使用 es6-promise

npm install es6-promise -S

// 在 main.js 首行引入即可
require("es6-promise").polyfill()

这样，就已经可以解决你的问题了。

因为我的项目中是有对 axios 进行封装的，而且我也不喜欢在 main.js 中来做这个操作，所以我将这个操作移到了 request.js 这个文件的开头。（request.js 的用途是用来对 axios 进行封装），所以我的是下面这样。

// request.js
require("es6-promise").polyfill()
import axios from 'axios'

当然，你也可以使用 import 的方式：

// request.js
import 'es6-promise/auto'
import axios from 'axios'

ok，现在问题解决了【IE和低版本的安卓设备都没问题了】：

方案二、使用 babel-polyfill

npm install babel-polyfill -S

// 在 main.js 首行引入即可
import "babel-polyfill"

因为我的项目中是有对 axios 进行封装的，而且我也不喜欢在 main.js 中来做这个操作，所以我将这个操作移到了 request.js 这个文件的开头。（request.js 的用途是用来对 axios 进行封装），所以我的是下面这样。

// request.js
import 'babel-polyfill'
import axios from 'axios'

或者：
webpack.config.js 中：

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

将原来的

entry: {
  app: './src/main.js'
}

改为：

entry: ['babel-polyfill', './src/main.js']

重新执行构建命令，问题同样解决了，IE和低版本安卓设备都可以正常发送请求了。很棒！

Tip

最后还是有一点提示想对你说：
1、不管是方案一还是方案二，建议的使用方式都是在 request.js 的头部引入。

2、es6-promise 和 babel-polyfill 文件大小的问题：


两者体积大小没有明显差异。

---

OK，写完了，希望可以帮到你们。提前祝大家周末愉快。

---------------------------(正文完)------------------------------------
一个 Vue 的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后： 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…