IE11 与 Vue 的兼容性问题

其实个人觉得兼容 IE11 都没啥必要（毕竟微软自己都放弃了 IE，开始使用 Edge 了），如果公司非要做那就硬着头皮上吧。

题外话：有人和我提过某些特殊行业可能有 IE 的应用市场，但我仍然保持怀疑的态度，有以下几点理由。

1. 首先如果是银行、军工或政府类对安全性要求极高的行业，我觉得他们是不会使用外部浏览器的，大多数情况下他们不能上外网，更可能浏览器都是自己写的，也就没 IE 什么事。
2. 再者如果说考虑到安全原因，说要用低版本 IE 浏览器，那么绝对是扯淡，因为现代浏览器绝对比古董浏览器安全的多的多。
3. 除此之外，无论是样式交互、解释性能或是兼容面，现代浏览器完爆了古董浏览器。

IE11 中白屏，报错的问题

1. 首先确保代码已经 ES5 化。
2. 其次确保将代码部署到服务器后仍然存在此问题，而不是使用本地打开 dist 文件夹下面的 index.html。因为 dist 以下的内容是需要服务器分发的，至少得起个本地 服务。
3. 查看是否有不支持 IE 当前版本的依赖在打包的时候也没有被预编译成 ES5，阻塞了。

1. 老版本脚手架

需要配置一下预编译

2. 新版脚手架

默认开启了向下兼容的预编译

Get 请求直接读取缓存的问题

当使用 IE11 时，IE11 遇到相同的 get 请求会默认直接读取本地缓存。

但是有时候我们重复获取相同请求的原因是我们刚刚对数据进行了增删改查，需要立刻看到增删改查的结果，所以我们发送了相同的请求。

解决办法，在请求路径中加入时间戳混淆。以 axios 拦截器为例：

service.interceptors.request.use(
  config => {
    // 兼容 IE11 相同的 get 请求直接读取本地缓存的问题
    if (config.method === 'get') {
      config.params = config.params || {}
      config.params.t = Date.parse(new Date()) / 1000
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

flex 布局的问题

虽然说 IE11 兼容了部分 flex 属性，但是实际用起来的效果还是很差的。

比如：最常用的 flex，垂直水平居中，IE11 在不规定子元素高度的情况下是没有办法做到垂直居中的。这种情况下只能改用 transform，top 的方案来垂直居中。

window.open(url) 参数传递不正确的问题

在兼容 IE11 的过程中，我发现 IE11 使用此属性时会产生编码问题，导致 vue router params 不能获取到正确的参数。

解决办法：手动对参数进行 URL 编码再解码。此方法非常重要，建议养成对 URL 进行编码的习惯。

Security 的问题

IE 中跨域的 websocket 可能会产生此错误，产生此错误需要用户在浏览器手动设置相关配置来保证功能正常（但这样是非常麻烦且不能保证 100% 功能正常使用的）。