最近公司要做几个项目，由于客户的浏览器大多使用的IE浏览器，有IE9、IE10、IE11等。所以开发的项目就需要适配IE浏览器，我们都知道，浏览器之争持续了很多年，从这里可以看到现在主流浏览器的市场份额，可以看到IE11还是比较多的，至于9和10我认为都可以放弃了，但是为了恰饭还是不得不适配。
我们的项目使用的技术栈是vue、vuex、vuerouter。网络请求库使用的是axios，使用的是Vue cli3脚手架创建的项目。
Vue cli3创建的项目和之前的相比现在没有了webpack.base.config.js的配置文件，所有的配置都在vue.config.js中配置的。
在我适配ie的过程中，网上也搜了大把的文章，都提到了一个库babel-polyfill，然而你去npm查看的时候已经告诉你弃用了。
This package has been deprecated in favor of separate inclusion of required parts of
core-jsandregenerator-runtime. See our website @babel/polyfill for more information.
所以要适配不同的浏览器，现在应该使用的是core-js。我们的项目中就是用的core-js，按照网上大多数教程就可以适配自己写的代码。
在我适配的过程中，不仅需要适配我自己的代码，还需要适配node_modules，所以在vue.config.js中的transpileDependencies下面写入需要适配的node_modules，基本上大多数问题就解决了。我项目中是这么写的：
transpileDependencies: [
'@qisong/vuekit',
'@qisong/weblib',
'_ant-design-vue@1.5.1@ant-design-vue',
'ant-design-vue', // 使用了antd
'resize-detector',
'delay',
'md5-webworker',
'vue-popperjs'
]
上面的模块都需要适配，所以都写了。
至此我已经适配了大多数问题了，但是在IE9上运行的时候，报错，错误提示是Blob不存在，根据查资料显示，IE9包括之前的版本都不支持Blob，我看了下使用了Blob的库真不少，比如耳熟能详的axios就有使用，所以我放弃了适配IE9。
另一个适配的问题是网络请求的问题，在Chrome和其他浏览器中基本没有问题，但是当我在IE浏览器里面请求的时候，发现每次请求数据都不会改变，经过查资料发现，原来IE浏览器会缓存上次请求，如果url没有改变的话，那么数据就是上次请求的数据，所以我用的方法就是在所有的get请求中加了个参数，参数的值是此次请求的时间戳。
service.interceptors.request.use(config => {
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
config.headers['Authorization'] = `Bearer ${token}` // 让每个请求携带自定义 token 请根据实际情况自行修改
}
if (config.method === 'get') {
if (config.params) {
config.params.d = new Date().getTime()
} else {
config.params = {d:new Date().getTime()}
}
}
return config
}, err)
我的代码是这么写的，在封装的请求方法的地方给get请求统一加了时间戳，具体的参数名需要自己和后台协定，比如我的参数名是d，如果后台接受到这个参数应该忽略，不然请求不到正确的数据。
接下来还有一些小问题需要适配，比如UI适配，可能我用了ant-design框架，然后我自己写的页面用的flex布局不起作用，当display:flex的时候，我给另一个元素设置了flex:1，不起作用，为此我写了个demo，使用flex布局，发现IE9和IE10兼容的还不错。所以我经过查资料没有继续使用flex:1，改为了flex-grow:1，然后为了和设计的图一样，我给需要占满剩余屏幕的元素给了个最小宽度或者高度。
其他的一些问题是比如图片我只给了宽度没给高度，那在IE10上面也是有问题，在IE11上就没有问题，所以我给使用到的图片都加了宽度和高度，我的总结就是，在IE上你需要什么都得自己去写清楚，不能因为使用Chrome养成的习惯，很多事情指望浏览器给你处理。
总体来说，IE浏览器坑还是比较多的，要适配需要耐心和多查资料，而且现在搜到的适配的文章基本上千篇一律，都是复制来粘贴去的，可用性不大，我自己写的也就是给自己总结，为了以后使用方便一些，作个记录。
目前还遇到个问题就是在IE上面，我监听delete按键有一些问题，用的原生的input组件，在监听键盘delete的时候，当input中没有值得时候，按删除键，会触发浏览器默认的返回上一页的操作，这个还需要研究研究，有的input没问题，有些有问题，我的项目是一个类似于发邮件的项目，出现这个问题的地方是在输入联系人后删除的时候，（输入框的效果和网易邮箱输入联系人的效果类似）,复制进去的邮箱通过空格和,进行分割，包括回车、空格都可以触发输入的操作。如果您知道如何解决，还希望不吝赐教。
