一：Vue 2.x cli
? ? ? ?1、 使用vue2.0的項目在IE11版本瀏覽器中是空白的? 或者路由跳轉(zhuǎn)但是而頁面顯示依舊是上一個路徑的頁面元素? 這是因為ie11不支持es6? 而我們之前有使用的babel-loader? 它僅是將es6的語法轉(zhuǎn)為es5? 卻不會去轉(zhuǎn)換es6的新屬性? 例如promise? 所以此時我們需要使用到babel-polyfill? 以下是具體操作方法
? ? ? ? 首先用cnpm 安裝babel-polyfill? ???npm install --save-dev babel-polyfill
? ? ? ??然后在webpack.base.conf.js?文件中修改?module.exports?中的entry，添加?babel-polyfill:? ? ?app: ['babel-polyfill', './src/main.js']
? ?????然后再main.js中直接引入：??import 'babel-polyfill'? ?最好放在第一個引入
? ??????完成上述一系列操作之后脚草，在IE11瀏覽器中重新跑下項目癞志，你就會發(fā)現(xiàn)绵患，你辛苦做的頁面出現(xiàn)了！
? ? ? ? 如果還沒出現(xiàn)? 不妨檢查一下? 看看自身項目中是否還有其它使用了es6卻沒有添加在babel-loader轉(zhuǎn)化配置中的? 例如保存靜態(tài)文件的文件夾static 則需要：
? ? ? ? 另外引入的一些組件也可能存在這方面的問題? 找到并添加進去就ok了? 到這里ie11的兼容基本上就差不多了 接下來談?wù)勎易约喉椖恐杏龅降钠渌鼏栴}? 歡迎探討
2喉恋、vue? v-model綁定computed的問題? ?在Chrome中是支持v-model直接綁定computed值的? 但是在ie11中? 計算屬性中必須有g(shù)et屬性? 例如：
? ? ? ? 如果無需v-model綁定? ?可以直接采用:value綁定computed? 則無需改造computed?
3悄但、在ie11瀏覽器中訪問網(wǎng)頁? 最好使用ip地址訪問? ?localhost時不時會出現(xiàn)莫名的錯誤
4、在ie11中? window,print()? 打印網(wǎng)頁時? 自帶的網(wǎng)頁信息會顯示在頁眉和頁腳? 在Chrome瀏覽器中? 可以通過圖一的方式去除?
????????但是在ie11中? 頁眉頁腳脫離文檔流? 且展示在頁面最上層? 正在尋求解決方案
5石抡、在ie11中src屬性接收的值如果是錯誤的ip地址格式則會報錯? 例如http://192.168.3.71:8083null? 后者http://192.168.3.71:8083undefined
? ? ? ? 自身項目錯誤示例：在home.vue中img引入的后端返回頭像? 在正確的ip地址后邊拼接后端返回的空值或者無效值
7檐嚣、IE11上router-link無法跳轉(zhuǎn)，主要是因為當url的hash change的時候啰扛，瀏覽器沒有做出相應(yīng)嚎京。這時候需要做一個兼容，當瀏覽器是IE11時手動給url加一個hashChange事件
下面是在網(wǎng)上找的兩種方法
第一種：
第二種：直接添加在main.js入口文件的最后即可
8隐解、如果ie11中g(shù)et請求一直從緩存中獲取? ?則可以在請求頭中添加'Pragma',?'no-cache'
????????//當只設(shè)置cacahe-control: 'no-cache'時鞍帝，IE瀏覽器始終返回304，抓包工具抓不到包煞茫，請求不和服務(wù)器確認?
?????????//當只設(shè)置cacahe-control: 'no-cache'時帕涌，google瀏覽器始終返回200，抓包工具可以抓取包续徽，請求重新從服務(wù)器獲取數(shù)據(jù)蚓曼，沒有利用到瀏覽器的緩存功能 'cache-control': 'no-cache',
????????//當只設(shè)置Pragma: 'no-cache'時，IE瀏覽器始終返回200钦扭，抓包工具可以抓到所有包纫版，請求重新從服務(wù)器獲取數(shù)據(jù)，沒有利用到瀏覽器的緩存功能?
????????//當只設(shè)置Pragma: 'no-cache'時客情，google瀏覽器始終返回200其弊，抓包工具可以抓到所有包，請求重新從服務(wù)器獲取數(shù)據(jù)膀斋，沒有利用到瀏覽器的緩存功能? ? ? 'Pragma': 'no-cache'?
????????//兩個參數(shù)同時不設(shè)置時梭伐，IE瀏覽器始終返回304，抓包工具抓不到包概页，請求不和服務(wù)器確認?
????????//兩個參數(shù)同時不設(shè)置時籽御，google瀏覽器首次返回200，之后始終返回304，并且有和服務(wù)器確認?
????????//兩個參數(shù)同時設(shè)置時技掏，IE瀏覽器始終返回200铃将，抓包工具可以抓到所有包，請求重新從服務(wù)器獲取數(shù)據(jù)哑梳，沒有利用到瀏覽器的緩存功能?
????????//兩個參數(shù)同時設(shè)置時劲阎，google瀏覽器始終返回200，抓包工具可以抓到所有包鸠真，請求重新從服務(wù)器獲取數(shù)據(jù)悯仙，沒有利用到瀏覽器的緩存功能
? ? ? ? 更多關(guān)于避免get請求從緩存中獲取的方法請參考：https://blog.csdn.net/weixin_36861725/article/details/82840097
9、在ie11中如果使用的flex布局中? 元素必須有height屬性否則一些屬性不生效例如：-webkit-box-align：center吠卷、-webkit-align-items：center锡垄。切min-height不會被視為height
10、在ie11中不支持document.body.append(‘$el’)祭隔，請使用document.body.appendChiled('$el'),?在ie11中不支持$el.remove()货岭，請使用$el.removeNode(true),? 到那時谷歌不支持$el.removeNode(true),? 這里需要做ie11和谷歌的兼容
11、ie11請求路徑上的漢子不會被瀏覽器編碼? 只會亂碼導(dǎo)致接口404? 例如A標簽下載路徑或者哈希值中的參數(shù)有漢字都會亂碼疾渴，這里需要前端自行編碼請求千贯，后端收到請求是解碼后的url無需處理? ?以下是a標簽全局編碼漢子的寫法
if?(window.navigator.userAgent.indexOf('Trident')?>=?0)?{
??????window.addEventListener('click',?(ev)?=>?{
????????if?(ev.target.nodeName?===?'A')?{
??????????let?dowUrl?=?ev.target.href
??????????let?reg?=?/[\u4E00-\u9FA5\uF900-\uFA2D]/
??????????if?(reg.test(dowUrl))?{
????????????ev.target.href?=?dowUrl.split('').map((item)?=>?{
??????????????if?(reg.test(item))?{
????????????????return?encodeURIComponent(item)
??????????????}?else?{
????????????????return?item
??????????????}
????????????}).join('')
??????????}
????????}
??????})
????}
同時后端在回傳下載文件時? ?文件名為漢子的? 下載下來也會亂碼? 這里需要后端回傳文件時對響應(yīng)頭中的fileName做編碼處理? 以下貼出參考：
@RequestMapping(
value?=?{"/download/export"},
method?=?{RequestMethod.GET,?RequestMethod.POST}
)
@Override
public?String?downloadExport(@RequestParam("filepath")?String?filepath,?HttpServletRequest?request,?HttpServletResponse?response)?{
if?(StringUtils.isEmpty(filepath))?{
return?null;
}?else?{
if?(filepath.startsWith("/"))?{
filepath?=?filepath.substring(1);
}
String?rootPath?=?FileUtils.getDownTmpRoot();
String?exportFilepath?=?rootPath?+?filepath;
this.outputStream(request,?response,?"application/octet-stream",?exportFilepath);
return?null;
}
}
@Override
protected?void?outputStream(HttpServletRequest?request,?HttpServletResponse?response,?String?contentType,?String?filepath)?{
if?(!StringUtils.isEmpty(filepath))?{
InputStream?input?=?null;
OutputStream?output?=?null;
File?file?=?null;
try?{
file?=?new?File(filepath);
if?(file.exists())?{
response.setCharacterEncoding("UTF-8");
response.setContentType(contentType);
response.setHeader("Content-disposition",?"attachment;?filename="?+?URLEncoder.encode(file.getName(),"utf-8"));
input?=?new?FileInputStream(file);
output?=?response.getOutputStream();
IOUtils.copy(input,?output);
return;
}
}?catch?(Exception?var18)?{
return;
}?finally?{
IOUtils.closeQuietly(input);
IOUtils.closeQuietly(output);
try?{
org.apache.commons.io.FileUtils.deleteQuietly(file);
}?catch?(Exception?var17)?{
}
}
}
}
12、ie11? 不支持flex: 1? 的寫法? ?如有需要請規(guī)范書寫? flex：1 1 auto
13搞坝、ie11不支持new Date(2021-3-1)是不支持的? 需要將? -? 換成? /? 例如：new Date(2021/3/1)
