最近项目开发中遇到需要用到ie浏览器的情况，因为是内网开发，大致记录下兼容过程。

问题1：ie11浏览器页面无法加载

首先遇到的问题是谷歌浏览器运行无问题，控制台也不报错，但是ie11浏览器就打不开，控制台报错----显示语法错误：

vue2 支持android vue2兼容_官网

，了解后发现ie浏览器不支持es6，可以通过core-js/stable及regenerator-runtime/runtime编译，vue cli官方推荐使用，main.js的第一行引入，前提是package.json安装了core-js

  1. npm安装core-js/stable及regenerator-runtime/runtime插件
  2. 在main.js第一行引入
import "core-js/stable"；
import "regenerator-runtime/runtime";

查看Vue官网后发现Vue提供了浏览器兼容配置

以下内容为Vue CLI官网Polyfill章节

一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill。

默认情况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。

如果有依赖需要 polyfill，你有几种选择：

  1. 如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
  2. 如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill。注意 es.promise 将被默认包含，因为现在的库依赖 Promise 是非常普遍的。
// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es.promise',
        'es.symbol'
      ]
    }]
  ]
}

提示

我们推荐以这种方式添加 polyfill 而不是在源代码中直接导入它们，因为如果这里列出的 polyfill 在 browserslist 的目标中不需要，则它会被自动排除。

  1. 如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify)：请使用 useBuiltIns: 'entry' 然后在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

以上方法可解决页面无法加载问题。

页面加载出来后又出现了新的问题

问题2：ie浏览器无法导出

增加此行代码即可

if ("msSaveOrOpenBlob" in navigator){
//ie兼容导出
    window.navigator.msSaveOrOpenBlob(blob,filename);
    return
}