vue兼容ie11的解决方法 2021年最新解决方案

官网解决方案是下面这样写的

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

但还是不太清楚怎么弄，于是根据各种搜索实验得到解决方法如下

首先安装 npm install --save core-js@3

// babel.config.js  添加下面这一段
presets: [
    'vue',
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry', // or "usage"
        corejs: 3,
      },
    ],
  ],

// main.js 顶部添加引用
import 'core-js/stable';
import 'regenerator-runtime/runtime';

但是可能还会出现部分写法和样式会造成的奇怪bug，这个具体问题具体分析。

如果是样式问题，
ie11 css hack 如下

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){
   /*兼容IE11  只有ie11会读取*/
  .mainpage {
    height: 100%;
  }
  
}

如果无法用生成a标签的方式下载文件，解决方案如下

function downloadFileLogic(file, filename) {
  const blob = new Blob([file]);
  // ie兼容处理  只有ie才有msSaveBlob这个方法
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    let a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = filename;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    a.remove();
  }
}

export default downloadFileLogic;

ie11 缓存问题，可以直接在拦截器或者请求中添加一个时间戳参数

// 添加请求拦截器
    axios.interceptors.request.use(
      function (config) {
        // 判断ie  解决ie11缓存会有一些莫名其妙的bug
        if (window.navigator.userAgent.indexOf('Trident') > -1) {
          config.params = { ...config.params, t: new Date().getTime() };
        }
        return config;
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
      },
    );

如果引入了一些其他的包，造成不支持
可以手动配置vue.config.js

module.exports = {
    // 如果全部都需要转换就改成下面这样
    transpileDependencies: [/node_modules[/\\\\](.*)[/\\\\]/,],
    // 单独处理需要编译的依赖包名
    transpileDependencies: ["vue-plugin-load-script",'qiankun', 'import-html-entry'],      
}