VueJs+Vuetify在IE11无法运行，添加babel-polyfill仍报错求助

我之前也碰到过类似的情况，结合你用的Vuetify webpack模板来看，大概率是babel-polyfill没有正确提前加载，或者Babel配置没针对IE11做适配，给你整理几个可行的解决步骤：

• 调整Webpack Entry的加载顺序
  你当前用对象形式声明entry的方式有问题——Webpack处理对象型entry时，会按属性名的字母顺序加载，这可能导致babel-polyfill没在你的应用代码之前执行。建议改成数组形式，强制polyfill优先加载：

  module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: ['babel-polyfill', './src/main.js'],
    // 其他配置项...
  }
  

  或者更稳妥的：直接在src/main.js的最顶部手动导入polyfill，这样完全不用依赖Webpack的entry排序：

  import 'babel-polyfill';
  // 之后再导入Vue、Vuetify等依赖
  import Vue from 'vue';
  import Vuetify from 'vuetify';
  

• 检查Babel配置是否适配IE11
  确保你的Babel配置文件（.babelrc或babel.config.js）明确指定了IE11作为目标浏览器，并且开启了useBuiltIns选项，让Babel根据环境自动筛选需要的polyfill：

  {
    "presets": [
      ["@vue/app", {
        "useBuiltIns": "entry",
        "targets": {
          "ie": 11,
          "chrome": "58",
          "firefox": "54"
        }
      }]
    ]
  }
  

  这里useBuiltIns: 'entry'会对应你全局引入的babel-polyfill，自动剔除冗余代码，只保留IE11需要的部分。

• 适配Vuetify的IE兼容要求
  Vuetify官方说明里提到，IE11需要额外的polyfill支持。如果你的项目里有未被转译的第三方依赖（比如某些npm包本身用了ES6+语法），需要在Webpack的规则里把它们加入转译范围：

  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, '../src'),
          path.resolve(__dirname, '../node_modules/vuetify') // 按需添加需要转译的依赖
        ]
      }
    ]
  }
  

• 备选方案：直接引入特定polyfill
  如果上面的方法都没生效，可以绕过babel-polyfill，直接引入core-js的针对性polyfill。在main.js顶部添加：

  import 'core-js/es/object/assign';
  // 要是还有其他ES6+方法报错，继续添加对应polyfill即可，比如：
  // import 'core-js/es/promise';
  // import 'core-js/es/array/from';
  

内容的提问来源于stack exchange，提问作者Cindy Conway