兼容IE对于一个菜鸡前端来说，简直是噩梦般的存在。我先哭为敬！😭😭😭
好了，话不多说，摸索中解决问题之路即将开启，我们准备出发～👊（建议将文章全部看完之后再进行尝试，因为中间有很多尝试没有成功）
重要提醒：
1、改完代码记得清浏览器缓存，再去看结果，尤其是在坚信自己写得没错的时候，不行就把浏览器关了再打开（好几次都是清完缓存没反应，关了重新打开就好了，就很迷）
2、安装依赖时能用npm就别用cnpm，别问我为什么🙄️
问题产生原因及解决思路：IE浏览器不能显示vue页面，主要原因是IE无法读取es6语法特性，但对于 IE9+，Vue 底层是支持，我们要做的就是把这些转换成浏览器能读取的语法。
问题一、ie浏览器中页面空白问题
首先，官网对兼容性的问题有所说明，其中，最重要的我觉得就是browserslist和Polyfill，项目中有package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件)，指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
1、在我的项目中是.browserslistrc文件，在根目录下
如果你的项目里没有，你可以在package.json文件里添加browserslist字段或者在根目录下添加.browserslistrc文件，文件中主要代码如下
last 2 versions> 1%not ie <= 8
其中：
" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）
第三个可以直接不写，兼容版本也可以写成3或者4，2不行就多试试。
2、配置根目录下的babel.config.js文件
"presets": [["@vue/app","@babel/preset-env",{"corejs": "3","useBuiltIns": "entry"}]],
我配置了，但是项目起不起来，我就删了，也可以。
3、在transpileDependencies中添加部分不能自动转换的依赖
默认情况下babel-loader会忽略所有node_modules中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在vue.config.js文件中的transpileDependencies选项中列出来。transpileDependencies写在module.exports中，下面所列内容根据自己项目来添加。
transpileDependencies: [/[/\\]node_modules[/\\](.+?)?crypto-js(.*)[/\\]/,/[/\\]node_modules[/\\](.+?)?view-design(.*)[/\\]src/,/[/\\]node_modules[/\\](.+?)?swiper(.*)[/\\]js/,]
如果经过了所有努力还是大白页，那么问题大概就是出在某些依赖使用了IE无法解析的语法，而前面配置的babel不能进行转换，那就把main.js中引入的东西全部注释掉，留个最小能观察页面的东西，包括vuex，axios等东西，然后一个一个放开进行排查，排查到的写在transpileDependencies中。
到此，我的大白页问题解决了，IE浏览器中终于看到了页面。在这之前也是经过了一些列努力，后面试着把之前的东西都删了，发现有些东西并不影响，主要可能是babel版本差异造成的。
下面整理了网上看着比较靠谱的方法（正所谓，每人遇一坑，坑坑不一样，多试试）
第一步：
在 babel 的相关配置文件（babel.config.js、.babelrc 或 package.json 的 babel 字段任一）中，增加"useBuiltIns": "entry"信息。 babel7版本以后会有差异
babel.config.js
{"presets": [["@babel/preset-env",{"useBuiltIns": "entry"}]]}
第二步：
安装 '@babel/polyfill' ，并在入口文件添加import '@babel/polyfill'
$ npm install --save @babel/polyfill
main.js
// import '@babel/polyfill' （Babel 7.4.0 以后，该包已被弃用）//推荐使用core-js/stable 和 regenerator-runtime/runtimeimport 'core-js/stable';import 'regenerator-runtime/runtime';
第三步：
配置transpileDependencies，跟上面一样。
第四步：（可以没有）
根据项目实际情况，看是否有必要引入。如果引入，建议下载到本地，再引入，我的项目里就没有用。
在index.html文件中引入es6-proxy-polyfill.js
<script src = "/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
第五步：（解决页面排版错误）
如果项目中使用了 CSSvar()，IE11 不兼容导致，思路相同，寻找相应的 polyfill 即可。使用了css-vars-ponyfill
$ npm install --save css-vars-ponyfill
main.js
import cssVars from 'css-vars-ponyfill'cssVars({})
问题二、部分IE浏览器能显示，但部分不行，控制台报错：无法获取未定义或null引用的属性“getItem”
问题原因是没有开启浏览器的本地存储localStorage，而项目中用到了
解决办法：在浏览器右侧设置中找到Internet选项——>高级——>勾选启用DOM存储——>确定
问题三、接口第一次请求合适，第二次请求不合适，例如用户第一次登陆成功，退出后再登陆接口请求不通
问题出在了浏览器缓存。一种办法是在浏览器进行设置，Internet选项——>常规——>浏览历史记录设置——>Internet临时文件——>勾选每次访问页面时
第一种方法不推荐，我们不能让客户去设置自己浏览器吧
第二种：给接口请求参数加时间戳new Date().getTime()，让每次请求都是新的（网上在请求头加不缓存设置的，亲测都没用）在请求封装的地方统一加
至此，兼容性的大问题解决了，剩下的就是些样式问题，比如IE浏览器阴影无效果，多行文本显示几行其余显示身略号等问题，都不是大问题，都容易，可以忽略的样式效果问题能忽略就忽略，毕竟是兼容嘛。
好了，这个大坑分享完了！
