关于使用vue-cli3.0的ie兼容问题

Question

之前使用vue-cli3.0构建了一个vue应用，里面使用了一些iview的ui组件，因为自己一直是用chrome来开发调试，测试今天突然说ie兼容有问题，我上ie试了下果然不一样
如下图：

点击这个菜单完全没反应，然后报错一堆，而且这个项目中的其余几个页面还是正常的，只是会报一些类似月iview中的错误，查了半天关于使用babel-polyfill来完善兼容性的方法，但是大部分都是vue-cli2版本的，其中使用在main.js中也尝试引入了，但是仍旧没效果，在思否上查到一些相关的资料也试了，有所改善，但是还是没有完全解决，第一次用vue-cli3.0，配置的时候使用entry提示报错，现在的代码如下：
main.js

// import 'babel-polyfill'
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import iView from 'iview';
import * as filters from './filters/index';
import 'iview/dist/styles/iview.css';
import '@/my-theme/index.less';
import '@/assets/css/iconfont.css';
import '@/assets/css/common.less';

Vue.config.productionTip = false;
Vue.use(iView);

Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app");

vue.config.js

module.exports = {
    chainWebpack: config => {
        config
            .entry('index')
            .add('babel-polyfill')
    }   //根据刚才在思否上查的资料修改的
}

babel.config.js没有动过

module.exports = {
    presets: ["@vue/app"]
};

项目目录结构

之前一直都是使用命令行直接用vue-cli建立项目，从来没自己手动配置过babel这东西，现在搞的有些乱，希望大家能帮忙指点一下，不胜感激

补充：IE报错总是提示 Error in render: "TypeError: 对象不支持“findIndex”属性或方法"

Answer 1

首先你设置下你的babel.config.js的内容,将'@vue/app'修改如下图所示

再者在vue.config.js中设置chainWebpack的配置,具体如下图所示

注：关于第一步，在vue-cli3中的文档说的挺清楚的，可以详细看下 文档地址

Answer 2

同遇到IE11下兼容性问题，相关处理是：

• vue.config.js中设置productionSourceMap: true,，这样部署后可以通过ie的查看元素，定位到具体哪个文件出的问题，而不是整个打包文件压根看不出对应哪个。（必须build部署后才行，dev看不了）

• 发现出问题的类库后，我这边是某个node_modules下的类库报es6不兼容的错误，同样在vue.config.js中设置：

  transpileDependencies: [
     'xxxx'  // 出问题的类库名，指定对第三方组件也进行babel-polyfill处理
  ],

我这边是通过以上解决方式解决的，解决后别忘了将productionSourceMap改回来。