Vue 项目中 Axios 报错 Promise 未定义及 IE10 报语法错误的解决方案

关于IE11及以下版本无法使用Promise还有IE10下报错的问题

Promise 未定义

在使用Axios开发时, IE11及以下版本报错会报Promise未定义的错误. 这是因为axios本质上是封装了ES6语法的promise,而promise在IE上并不兼容.

然而说到js兼容, 这时候我们又能联想到babel.. 没错, babel中有一个工具叫做babel-Polyfill, 它会仿效一个完整的ES2015+环境，并意图运行于一个应用中而不是一个库/工具. 其实食用的方式也很简单.

我们将babel-polyfill装进我们项目依赖中. 这里值得注意的是, 安装的时候需要安装到dependency(生产依赖)中, 而不是devDependency(开发依赖)
(tips.关于两者的区别, 我以前的文章有专门讲过, 感兴趣的可以看一下)

1	npm install --save babel-polyfill

首先在mian.js的顶部引入import "babel-polyfill";确保能够最先加载, 随后我们在build目录下webpack.config.js修改配置, 将app使用babel-polyfill进行编译. 这时候我们再重新编译, 就会发现promise未定义的错误就以及消失了

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

你以为文章到这里就结束了吗…. 随即我们切换到IE10下进行测试. 你会发现, 又冒出了一个报错.. Emmm, 解决一个又来一个, 惊不惊喜意不意外?

语法错误

当你在IE10下看到提示语法错误的时, 这时候你就得去检查检查package.json下 webpack-dev-server版本是否高于2.6.1. 出现这个报错主要是因为项目中使用了const等语法, 然而IE11以下并不认得ES6语法语法.这个问题只有在开发模式才会出现, 只要es6转码后，打包放到服务器上，就没有问题了.

如果你想在开发阶段在IE10下测试你的代码, 你可以选择降低版本到2.6.1上, 问题就解决了.