前端开发中在IE11下出现的一些兼容性问题（持续汇总）

1、Chrome上可以正常打开网页，但是在IE11上打开一片空白，打开控制台报语法错误，如下图：
原因：
vue-baidu-map组件可能不兼容IE11。
解决办法:
在vue.config.js增加如下配置即可:

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

vue-cli官网中对transpileDependencies的介绍：

transpileDependencies

• Type:Array
• 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阻止表单默认刷新。

登录

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)
})

持续更新中......