前端開發中在IE11下出現的一些兼容性問題（持續彙總）

1、Chrome上能夠正常打開網頁，可是在IE11上打開一片空白，打開控制檯報語法錯誤，以下圖：
點擊chunk-vendors.js後發現是vue-baidu-map組件報錯，以下圖：
緣由：
vue-baidu-map組件可能不兼容IE11。
解決辦法:
在vue.config.js增長以下配置便可:

module.exports = {
  transpileDependencies: ['vue-baidu-map']
}

vue-cli官網中對transpileDependencies的介紹：

transpileDependencies

• Type:Array<string | RegExp>
• Default:[]

  默認狀況下babel-loader會忽略全部node_modules中的文件。若是你想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來。

參考資料：https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

2、IE11下在登陸頁面，當el-button組件設置native-type="submit"後，點擊登陸後頁面刷新又回到了登陸頁面。
緣由：使用submit會默認刷新頁面。
解決辦法：事件後加.prevent阻止表單默認刷新。

<el-button type="primary" native-type="submit" :loading="loginStatus" @click.prevent="login" @keyup.enter="login" style="width: 100%;">登陸</el-button>

3、css中使用flex:1在IE11下出現高度不能自動充滿多餘空間。以下圖：
緣由：

1. flex:1在IE10-11中會默認解析成：flex: 1 1 0
2. flex:1在Chrome和Firefox中會解析成：flex: 1 1 auto

因此因爲在IE瀏覽器中有兼容性問題，因此會致使樣式出現差別。
解決辦法：
使用flex-grow: 1替換flex:1能夠解決此樣式問題。

4、使用dayjs在IE11下轉換這種格式2020-03-17T17:24:26.000+0800時間時，轉化結果爲invalid time。
緣由：
dayjs部分功能兼容性問題。
解決辦法：
使用moment.js。

5、vue項目在ie11下一片空白並報錯promise undefined。
緣由：
ie11瀏覽器解析不了es6的語法，須要咱們使用babel。可是Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API ，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign）都不會轉碼。
解決辦法：
1.在vue項目中安裝babel-polyfill。

npm install --save-dev babel-polyfill

2.在mian.js中引入babel-polyfill（要在引入vue，vuex，elementui 以前引入）。

import 'babel-polyfill'

3.重啓項目便可正常。

6、IE11中get請求方式在初次請求以後再也不進行請求了，而是會從緩存中獲取數據，可是chrome瀏覽器會中卻每次都會獲取。
緣由：
IE瀏覽器會有緩存。
解決辦法：
使用請求攔截器，爲每一個請求加一個時間戳。

// 請求攔截器 --- 僅axios
service.interceptors.request.use((config) => {
  config.params = {
    _t: Date.parse(new Date()) / 1000,
    ...config.params
  }
  return config
}, (error) => {
  // 錯誤拋到業務代碼
  error.data = {}
  error.data.msg = '服務器異常，請聯繫管理員！'
  return Promise.resolve(error)
})

持續更新中......