项目兼容ie11，项目白屏在公司做项目时，要求项目必须兼容ie11，项目有vue-cli搭建，chrome一切正常，IE

在公司做项目时，要求项目必须兼容ie11，项目有vue-cli搭建，chrome一切正常，IE 下项目白屏，不显示任何内容。

安装babel-polyfill

npm install babel-ployfill --save-dev

在main.js文件引入

import 'babel-polyfill'

修改 webpack 配置文件webpack.base.config.js的 entry 项（有些项目没有可不用配置）

module.exports = {
    entry: {
        app: ['babel-ployfill','./src/index.js']
    }
}

babel 是一个转码器，可以将 ES6 的代码转换为 ES5，可以兼容一些不支持 ES6 的环境，比如 IE。

但babel默认值转换新的 javascript 语法，如箭头函数等，但不能转换set、maps、proxy、promise等新的API。

他的运行时机是执行源代码前，因此是一个上线时的依赖 dependency，而不是开发依赖 devDependency。

配置 entry，就是配置页面的入口文件，即从哪个文件开始。进入入口起点之后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。允许只当多个不同的入口起点，在启动的时候同时加载。

其他导致白屏的原因

安装之后，项目可能还是白屏，那么就是你在项目的首页写入了部分一些 IE 不兼容的语法，导致项目无法正常加载。

比如：

使用了比较复杂、IE无法识别的正则表达式；
使用了 remove 方法，替换为 removeNode(true)；

if (
  !!window.ActiveXObject ||
  'ActiveXObject' in window ||
  /Trident\/7\./.test(navigator.userAgent)
) {
  // ie
  this.editor.container.removeNode(true);
} else {
  // 其他
  this.editor.container.remove();
}

代码包含下载功能，使用 window.navigator.msSaveBlob

// 接口返回数据res.data
const _res = res.data;
const blob = new Blob([_res], { type: 'application/vnd.ms-excel' });
if (window.navigator.msSaveBlob) {
  // ie
  window.navigator.msSaveBlob( blob, `文件名.xls` );
} else {
  // 其他
  const fileName = res.headers['content-disposition'].split('=')[1];
  const downloadElement = document.createElement('a');
  const href = window.URL.createObjectURL(blob); // 创建下载的链接
  downloadElement.href = href;
  downloadElement.download = decodeURI(fileName); // 下载后文件名
  document.body.appendChild(downloadElement);
  downloadElement.click(); // 点击下载
  document.body.removeChild(downloadElement); // 下载完成移除元素
  window.URL.revokeObjectURL(href); // 释放掉blob对象
}

代码使用了 new Event 以及 dispatchEvent，页面报错无法显示正常页面

// 原代码

$("#remark").val("");
$("#remark")[0].dispatchEvent(new Event('input'));

// 新代码

var event2 = document.createEvent("HTMLEvents");
event2.initEvent("input", false, true);
$("#remark")[0].dispatchEvent(event2);

sockjs报错

打开 /node_modules/sockjs_client/dist/sockjs.js, 屏蔽1606行代码，注意在打包时一定要屏蔽。

其中，sockjs 是 webSocket 的一种模拟，sockJs 会尽可能的应对 webSocket API。WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，也是底层协议，而 STOMP 是基于 WebSocket（SockJS）的上层协议。

解决了这些，页面基本能够显示正常，剩下的就是样式兼容问题，逐一修改即可。