最近公司要做幾個(gè)項(xiàng)目琅锻，由于客戶的瀏覽器大多使用的IE瀏覽器卦停，有IE9、IE10恼蓬、IE11等惊完。所以開(kāi)發(fā)的項(xiàng)目就需要適配IE瀏覽器，我們都知道处硬，瀏覽器之爭(zhēng)持續(xù)了很多年小槐，從這里可以看到現(xiàn)在主流瀏覽器的市場(chǎng)份額，可以看到IE11還是比較多的郁油，至于9和10我認(rèn)為都可以放棄了本股，但是為了恰飯還是不得不適配。
我們的項(xiàng)目使用的技術(shù)棧是vue桐腌、vuex拄显、vuerouter。網(wǎng)絡(luò)請(qǐng)求庫(kù)使用的是axios案站，使用的是Vue cli3腳手架創(chuàng)建的項(xiàng)目躬审。
Vue cli3創(chuàng)建的項(xiàng)目和之前的相比現(xiàn)在沒(méi)有了webpack.base.config.js的配置文件，所有的配置都在vue.config.js中配置的。
在我適配ie的過(guò)程中承边，網(wǎng)上也搜了大把的文章遭殉，都提到了一個(gè)庫(kù)babel-polyfill，然而你去npm查看的時(shí)候已經(jīng)告訴你棄用了博助。
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.
所以要適配不同的瀏覽器险污，現(xiàn)在應(yīng)該使用的是core-js。我們的項(xiàng)目中就是用的core-js富岳，按照網(wǎng)上大多數(shù)教程就可以適配自己寫(xiě)的代碼蛔糯。
在我適配的過(guò)程中，不僅需要適配我自己的代碼窖式，還需要適配node_modules蚁飒，所以在vue.config.js中的transpileDependencies下面寫(xiě)入需要適配的node_modules，基本上大多數(shù)問(wèn)題就解決了萝喘。我項(xiàng)目中是這么寫(xiě)的：
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'
]
上面的模塊都需要適配淮逻，所以都寫(xiě)了。
至此我已經(jīng)適配了大多數(shù)問(wèn)題了阁簸，但是在IE9上運(yùn)行的時(shí)候爬早，報(bào)錯(cuò)，錯(cuò)誤提示是Blob不存在强窖，根據(jù)查資料顯示凸椿，IE9包括之前的版本都不支持Blob，我看了下使用了Blob的庫(kù)真不少翅溺，比如耳熟能詳?shù)?code>axios就有使用，所以我放棄了適配IE9髓抑。
另一個(gè)適配的問(wèn)題是網(wǎng)絡(luò)請(qǐng)求的問(wèn)題咙崎，在Chrome和其他瀏覽器中基本沒(méi)有問(wèn)題，但是當(dāng)我在IE瀏覽器里面請(qǐng)求的時(shí)候吨拍，發(fā)現(xiàn)每次請(qǐng)求數(shù)據(jù)都不會(huì)改變褪猛，經(jīng)過(guò)查資料發(fā)現(xiàn)，原來(lái)IE瀏覽器會(huì)緩存上次請(qǐng)求羹饰，如果url沒(méi)有改變的話伊滋，那么數(shù)據(jù)就是上次請(qǐng)求的數(shù)據(jù)，所以我用的方法就是在所有的get請(qǐng)求中加了個(gè)參數(shù)队秩，參數(shù)的值是此次請(qǐng)求的時(shí)間戳笑旺。
service.interceptors.request.use(config => {
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
config.headers['Authorization'] = `Bearer ${token}` // 讓每個(gè)請(qǐng)求攜帶自定義 token 請(qǐng)根據(jù)實(shí)際情況自行修改
}
if (config.method === 'get') {
if (config.params) {
config.params.d = new Date().getTime()
} else {
config.params = {d:new Date().getTime()}
}
}
return config
}, err)
我的代碼是這么寫(xiě)的，在封裝的請(qǐng)求方法的地方給get請(qǐng)求統(tǒng)一加了時(shí)間戳馍资，具體的參數(shù)名需要自己和后臺(tái)協(xié)定筒主，比如我的參數(shù)名是d，如果后臺(tái)接受到這個(gè)參數(shù)應(yīng)該忽略，不然請(qǐng)求不到正確的數(shù)據(jù)乌妙。
接下來(lái)還有一些小問(wèn)題需要適配使兔，比如UI適配，可能我用了ant-design框架藤韵，然后我自己寫(xiě)的頁(yè)面用的flex布局不起作用虐沥，當(dāng)display:flex的時(shí)候，我給另一個(gè)元素設(shè)置了flex:1泽艘，不起作用置蜀，為此我寫(xiě)了個(gè)demo，使用flex布局悉盆，發(fā)現(xiàn)IE9和IE10兼容的還不錯(cuò)盯荤。所以我經(jīng)過(guò)查資料沒(méi)有繼續(xù)使用flex:1，改為了flex-grow:1焕盟，然后為了和設(shè)計(jì)的圖一樣秋秤，我給需要占滿剩余屏幕的元素給了個(gè)最小寬度或者高度。
其他的一些問(wèn)題是比如圖片我只給了寬度沒(méi)給高度脚翘，那在IE10上面也是有問(wèn)題灼卢，在IE11上就沒(méi)有問(wèn)題，所以我給使用到的圖片都加了寬度和高度来农，我的總結(jié)就是鞋真，在IE上你需要什么都得自己去寫(xiě)清楚，不能因?yàn)槭褂肅hrome養(yǎng)成的習(xí)慣沃于，很多事情指望瀏覽器給你處理涩咖。
總體來(lái)說(shuō)，IE瀏覽器坑還是比較多的繁莹，要適配需要耐心和多查資料檩互，而且現(xiàn)在搜到的適配的文章基本上千篇一律，都是復(fù)制來(lái)粘貼去的咨演，可用性不大闸昨，我自己寫(xiě)的也就是給自己總結(jié)，為了以后使用方便一些薄风，作個(gè)記錄饵较。
目前還遇到個(gè)問(wèn)題就是在IE上面，我監(jiān)聽(tīng)delete按鍵有一些問(wèn)題遭赂，用的原生的input組件循诉，在監(jiān)聽(tīng)鍵盤(pán)delete的時(shí)候，當(dāng)input中沒(méi)有值得時(shí)候嵌牺，按刪除鍵打洼，會(huì)觸發(fā)瀏覽器默認(rèn)的返回上一頁(yè)的操作龄糊，這個(gè)還需要研究研究，有的input沒(méi)問(wèn)題募疮，有些有問(wèn)題炫惩，我的項(xiàng)目是一個(gè)類(lèi)似于發(fā)郵件的項(xiàng)目，出現(xiàn)這個(gè)問(wèn)題的地方是在輸入聯(lián)系人后刪除的時(shí)候阿浓，（輸入框的效果和網(wǎng)易郵箱輸入聯(lián)系人的效果類(lèi)似）,復(fù)制進(jìn)去的郵箱通過(guò)空格和,進(jìn)行分割他嚷，包括回車(chē)、空格都可以觸發(fā)輸入的操作芭毙。如果您知道如何解決筋蓖，還希望不吝賜教。
