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 如下

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

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

 -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'],      }