IE11 el-menu鼠标滑过菜单报错：Error in v-on handler: “TypeError: 对象不支持此操作“和[vue-router] uncaught error during

错误

使用vue的el-menu组件，在chome中无报错，在IE11中报有两个错误

[vue-router] uncaught error during
Error in v-on handler: “TypeError: 对象不支持此操作”

分析

element-ui中使用了mouseEvent事件，用到了不兼容ie11的API
重新定义mouseEvent事件并挂载到window下，覆盖原有的mouseEvent事件

解决办法

在 /public/js/下创建polyfill.js

(function (window) {
  try {
    new MouseEvent('test');
    return false; // No need to polyfill
  } catch (e) {
    // Need to polyfill - fall through
  }

  // Polyfills DOM4 MouseEvent
  var MouseEventPolyfill = function (eventType, params) {
    params = params || { bubbles: false, cancelable: false };
    var mouseEvent = document.createEvent('MouseEvent');
    mouseEvent.initMouseEvent(eventType,
      params.bubbles,
      params.cancelable,
      window,
      0,
      params.screenX || 0,
      params.screenY || 0,
      params.clientX || 0,
      params.clientY || 0,
      params.ctrlKey || false,
      params.altKey || false,
      params.shiftKey || false,
      params.metaKey || false,
      params.button || 0,
      params.relatedTarget || null
    );

    return mouseEvent;
  }

  MouseEventPolyfill.prototype = Event.prototype;

  window.MouseEvent = MouseEventPolyfill;
})(window);

在 /public/中引入polyfill.js

<!-- polyfill -->
<script src="./js/polyfill.js"></script>