Vue项目：对象不支持此属性或方法“hasOwnProperty” IE11

Question

我正在使用 vue 高级 webpack 模板开发一个 vue 应用程序，我并没有过多关注 IE 浏览器，但今天我尝试了，我得到了非常奇怪的错误。

我在组件的挂载函数中有几个用 Highcharts 渲染的迷你图，我认为我有这个错误的地方在这里：

options = Highcharts.merge(defaultOptions, options);

我使用 babel-polyfill，我的 .babelrc 配置是这样的：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": [
          "Chrome >= 52",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      },
      "useBuiltIns": true,
      "debug": true
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", 
"dynamic-import-node"]
    }
  }
}

在 webpack.base.config.js 我配置了这个加载器：

 {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('i18n'), resolve('test'), 
      resolve('node_modules/webpack-dev-server/client')]
  },

任何帮助将不胜感激，谢谢！

List.vue相关来源：

import createSmallCharts from './smallChart';

function refreshCharts(elements) {
  createSmallCharts(elements);
}

...

mounted() {
  const elements = this.$refs['currency-table-
    body'].querySelectorAll('.table__price-graph');
  refreshCharts(elements);
},

还有 createSmallCharts 的来源

import * as Highcharts from 'highcharts/highcharts';

// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function createSmallCharts(elements) {
  const time = +new Date();

  let stringdata;
  let data;
  let n = 0;

  for (let i = 0; i < elements.length; i += 1) {
    const element = elements[i];

    stringdata = element.getAttribute('data-sparkline');
    data = stringdata.split(', ').map(dataEl => parseFloat(dataEl));

    Highcharts.SparkLine(element, {
      series: [{
        data,
        pointStart: 1,
        pointInterval: 24 * 3600 * 1000,
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1,
          },
        },
      }],
      plotOptions: {
        series: {
          marker: {
            enabled: false,
            states: {
              hover: {
                enabled: true,
                radius: 3,
              },
            },
          },
        },
      },
      tooltip: {
        formatter: () => false,
      },
    });

    // If the process takes too much time, run a timeout to allow interaction with the browser
    if (new Date() - time > 500) {
      elements.splice(0, i + 1);
      setTimeout(createSmallCharts, 0);
      break;
    }
  }
}

export { createSmallCharts as default };

SparkLine 的最终定义：

import Highcharts from 'highcharts/highcharts';

Highcharts.SparkLine = function SparkLine(...params) {
  const hasRenderToArg = typeof a === 'string' || params[0].nodeName;
  let options = params[hasRenderToArg ? 1 : 0];
  const defaultOptions = {
    chart: {
      renderTo: (options.chart && options.chart.renderTo) || this,
      backgroundColor: null,
      borderWidth: 0,
      type: 'area',
      margin: [2, 0, 2, 0],
      width: 120,
      height: 20,
      style: {
        overflow: 'visible',
      },

      // small optimalization, saves 1-2 ms each sparkline
      skipClone: true,
    },
    title: {
      text: '',
    },
    credits: {
      enabled: false,
    },
    xAxis: {
      labels: {
        enabled: false,
      },
      title: {
        text: null,
      },
      startOnTick: false,
      endOnTick: false,
      tickPositions: [],
    },
    yAxis: {
      endOnTick: false,
      startOnTick: false,
      labels: {
        enabled: false,
      },
      title: {
        text: null,
      },
      tickPositions: [0],
    },
    legend: {
      enabled: false,
    },
    tooltip: {
      backgroundColor: null,
      borderWidth: 0,
      shadow: false,
      useHTML: true,
      hideDelay: 0,
      shared: true,
      padding: 0,
      positioner(w, h, point) {
        return {
          x: point.plotX - (w / 2),
          y: point.plotY - h,
        };
      },
    },
    plotOptions: {
      series: {
        animation: false,
        lineWidth: 1,
        shadow: false,
        states: {
          hover: {
            lineWidth: 1,
          },
        },
        marker: {
          radius: 1,
          states: {
            hover: {
              radius: 2,
            },
          },
        },
        fillOpacity: 0.25,
      },
      column: {
        negativeColor: '#910000',
        borderColor: 'silver',
      },
    },
  };

  options = Highcharts.merge(defaultOptions, options); // I think ERROR is here

  return hasRenderToArg ?
    new Highcharts.Chart(params[0], options, params[2]) :
    new Highcharts.Chart(options, params[1]);
};

Answer 1

尝试将它导入到您的 main.js 文件的顶部，如下所示：

import 'babel-polyfill'

至少这为我解决了这个问题。