Vue项目IE11报错：对象不支持hasOwnProperty属性或方法

我之前也踩过IE11兼容性的坑，结合你的场景，咱们一步步排查解决：

1. 确认babel-polyfill的引入时机是否正确 #

babel-polyfill必须在所有应用代码之前加载，才能确保ES6+特性被提前补全。你需要把它放在main.js的最顶部：

import 'babel-polyfill'
import Vue from 'vue'
// 其他组件、工具类的引入代码...

如果是在组件内部才引入polyfill，那Highcharts的代码可能已经在polyfill生效前执行了，自然会报错。

2. 完善.babelrc的targets配置 #

你的.babelrc里browsers配置没写完，必须明确指定IE11，让babel知道要针对性做转译和polyfill：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": [
          "ie 11",
          "> 1%",
          "last 2 versions",
          "not dead"
        ]
      },
      "useBuiltIns": "entry" // 关键配置：根据目标浏览器自动引入所需polyfill
    }]
  ]
}

useBuiltIns: 'entry'会结合你指定的浏览器范围，只引入必要的polyfill，既避免冗余，又能覆盖IE11的特性需求。

3. 开启Highcharts的IE11兼容模式 #

部分新版本Highcharts默认会使用IE11不支持的特性，你可以在初始化时强制开启兼容：

// 在mount之前的合适位置（比如main.js或组件的created钩子）配置
Highcharts.setOptions({
  compatibility: {
    ie11: true // 强制开启IE11兼容支持
  }
});

另外注意：Highcharts v9及以上版本对IE11的支持有限，如果用的是高版本，建议降级到v8.x，或者使用官方提供的IE兼容包。

4. 让Webpack转译Highcharts代码 #

Webpack默认不会转译node_modules里的第三方库，但Highcharts可能包含未转译的ES6代码，导致IE11无法识别。你需要在webpack配置里把Highcharts加入转译列表：
在build/webpack.base.conf.js的module.rules中修改babel-loader规则：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [
        resolve('src'),
        resolve('test'),
        resolve('node_modules/highcharts') // 新增这一行，让babel转译Highcharts
      ]
    }
  ]
}

5. 精准定位报错点 #

如果以上步骤还没解决，打开IE11的开发者工具（F12）查看具体报错信息（比如是Object.assign未定义，还是Array.prototype.includes缺失），这样能更精准地补充对应的polyfill。不过一般来说，正确配置babel-polyfill后，这些基础特性都会被覆盖。

内容的提问来源于stack exchange，提问作者Javier Muñoz Tous