VUE2+IVIEW 兼容ie9配置记录

• js兼容 man.js导入即可

export default function (vue) {
  if (Number.parseInt === undefined) Number.parseInt = window.parseInt;
  if (Number.parseFloat === undefined) Number.parseFloat = window.parseFloat;

  if (window.HTMLElement) {
    if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
      Object.defineProperty(HTMLElement.prototype, 'dataset', {
        get: function () {
          var attributes = this.attributes; // 获取节点的所有属性
          var name = [];
          var value = []; // 定义两个数组保存属性名和属性值
          var obj = {}; // 定义一个空对象
          for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
            if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
              // 取出属性名的"data-"的后面的字符串放入name数组中
              name.push(attributes[i].nodeName.slice(5));
              // 取出对应的属性值放入value数组中
              value.push(attributes[i].nodeValue);
            }
          }
          for (var j = 0; j < name.length; j++) { // 遍历name和value数组
            obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
          }
          return obj; // 返回对象
        },
      });
    }
  };
  if (!('classList' in document.documentElement)) {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
      get: function () {
        var self = this;

        function update(fn) {
          return function (value) {
            var classes = self.className.split(/\s+/g);
            var index = classes.indexOf(value);

            fn(classes, index, value);
            self.className = classes.join(' ');
          };
        }
        return {
          add: update(function (classes, index, value) {
            if (!~index) classes.push(value);
          }),

          remove: update(function (classes, index) {
            if (~index) classes.splice(index, 1);
          }),

          toggle: update(function (classes, index, value) {
            if (~index) {
              classes.splice(index, 1);
            } else {
              classes.push(value);
            }
          }),

          contains: function (value) {
            return !!~self.className.split(/\s+/g).indexOf(value);
          },
          item: function (i) {
            return self.className.split(/\s+/g)[i] || null;
          },
        };
      },
    });
  }

  // window.requestAnimationFrame多浏览器兼容问题补丁
  // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
  // MIT license


  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function (callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function () {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
    };
  }
  // router-link 兼容
  if (
    '-ms-scroll-limit' in document.documentElement.style &&
    '-ms-ime-align' in document.documentElement.style
  ) { // detect it's IE11
    window.addEventListener("hashchange", function (event) {
      var currentPath = window.location.hash.slice(1);
      if (vue.$route.path !== currentPath) {
        vue.$router.push(currentPath)
      }
    }, false)
  }

}

• 下载es6-promise ie-placeholder依赖并导入

  
  1563935436(1).jpg

// main.js 中使用 es6-promise
promise.polyfill()

• 下载iview并配置模块化引入

//.babelrc 添加plugins
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
    ["import", {
      "libraryName": "iview",
      "libraryDirectory": "src/components"
    }]
  ]
}

//vue-loader.config.js  修改extract
//npm install extract-text-webpack-plugin --save-dev
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true   //提取css到单个文件
  })

//webpack.base.conf.js  修改入口
  entry: {
//  app: './src/main.js'
    app: ["babel-polyfill", "./src/main"]
   },

//webpack.dev.conf.js  添加新配置
const ExtractTextPlugin = require('extract-text-webpack-plugin')
new ExtractTextPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
     allChunks: true,
 })