使用Polyfil转换代码·babel·而且最好逐步让用户转用更现代的浏览器

一、使用Polyfill和Babel转换代码

为了让IE浏览器能跑得通现代JavaScript代码，我们需要用Polyfill来填平功能差距，再通过Babel转换成旧版的代码。

我们要装一些东西：

npm install --save-dev @babel/polyfill


npm install --save-dev babel-loader @babel/core

然后在项目根目录下的文件里加些配置：

// .babelrc


{


  "presets": ["@babel/preset-env"]


}

别忘了引入Polyfill：

import "core-js";

二、配置Vue CLI

Vue CLI自带的配置可能还不够，我们需要调整一下：

npm install --save-dev vue-loader

创建或编辑项目配置文件，通常是在 vue.config.js 里面加这些：

module.exports = {


  configureWebpack: {


    resolve: {


      alias: {


        'vue$': 'vue/dist/vue.esm.js'  // 如果没有这句可能会警告，这是为了支持IE


      }


    }


  },


  chainWebpack: config => {


    config


      .module


      .rule('vue')


      .use('babel-loader')


      .loader('babel-loader')


      .tap(options => ({ ...options, presets: [['@babel/preset-env', { targets: 'IE >= 11' }]] }));


  }


}

三、修复CSS兼容性问题

IE对CSS的支持有点差，所以要小心点：

用Autoprefixer来自动添加必要的CSS前缀：

npm install --save-dev autoprefixer

配置Autoprefixer：

postcss: {


  plugins: [


    autoprefixer()


  ]


}

编写CSS的时候，尽量用符合规范的代码，避开IE不支持或支持不好的特性。

四、处理第三方库的兼容性

有些库可能不支持IE，这时我们需要做一些特别处理：

1. 更新第三方库版本，保证它们支持IE。
2. 如果某库不支持，找找有没有兼容版本，或者自己添加Polyfill。

按照这些步骤和配置，你的Vue项目应该就能在IE浏览器上正常运行了。记得经常更新依赖和配置，并在IE浏览器中做测试。而且，最好逐步让用户转用更现代的浏览器。