vue学习日记：使用vue-cli搭建项目支持ie10和ie11的一些尝试

为什么叫一些尝试呢，因为我也不知道具体是哪些是必须的，哪些不是必须的，

但是还是想和大家分享一下，所以还是记录一下吧。

用vue-cli搭建项目之后，写了基本的路由，配置 了跨域，使用axios进行请求，

并配置了统一的拦截器，想想是时候看一下兼容性了，然后发现ie11都打不开。。。

还能怎么办呢，上网找攻略呗。以下都是我尝试过的方法，最终成功的在ie10中

正常运行了，如果你也实在是弄不好，不如跟着我把下面的方法都用上吧。

1. 开始怀疑是babelrc的问题，所以上网找了某篇攻略修改了babelrc文件，

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "ie":10
      }
    }],
    "stage-0"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

然后安装“stage-0”,

npm install babel-preset-stage-0 --save-dev

2.好像是由于babel不会转译promise之类的东西，所以我们需要安装es6-promise

npm install es6-promise --save

并在main.js中插入以下代码

import promise from 'es6-promise';
promise.polyfill();

然后理论上应该可以在ie11中正常运行了（如果不行请继续下面的步骤）

3.降级webpack-dev-server，网上很多资料都说webpack-dev-server新的版本不支持旧的浏览器，其中就

包括ie10，会导致无法在开发环境中在ie10上立即看到效果，但是打包后在ie10上浏览就没问题。所以我们

先卸载以前的webpack-dev-server

npm uninstall webpack-dev-server

再安装2.5.1版本的webpack-dev-server(亲测有效)

npm install webpack-dev-server@2.5.1 --save-dev

4.安装babel-polyfill

npm install babel-polyfill --save

在main.js中引入babel-polyfill

import 'babel-polyfill';

修改build文件夹下的webpack.base.conf.js,将入口文件改为：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app:['babel-polyfill','./src/main.js']
  },

5.我经过了以上的折腾，发现ie10还是在报错，是有一个地方有let。我找到打包后的文件，

发现某个js中确实存在let，好像这个let没有被babel编译，经过排查，发现没有经过编译的文件

是我在config文件夹下的axios.js文件，这个文件是用来统一拦截请求的，于是尝试把config文件夹下

的所有文件都加入babel编译的数组中，打开webpack.base.conf.js，修改rule中的js部分，

  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('config')]
      },

在include数组中加入了config文件夹，然后在运行就可以在ie10中看到效果了，开发环境和build后都可以在ie10中正常运行

总结：希望这篇文章可以帮助到大家吧，虽然其中哪些有用，哪些没用我自己也没弄清楚，