VUE2+IVIEW 兼容ie9配置記錄

  • js兼容 man.js導(dǎo)入即可
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; // 獲取節(jié)點的所有屬性
          var name = [];
          var value = []; // 定義兩個數(shù)組保存屬性名和屬性值
          var obj = {}; // 定義一個空對象
          for (var i = 0; i < attributes.length; i++) { // 遍歷節(jié)點的所有屬性
            if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果屬性名的前面5個字符符合"data-"
              // 取出屬性名的"data-"的后面的字符串放入name數(shù)組中
              name.push(attributes[i].nodeName.slice(5));
              // 取出對應(yīng)的屬性值放入value數(shù)組中
              value.push(attributes[i].nodeValue);
            }
          }
          for (var j = 0; j < name.length; j++) { // 遍歷name和value數(shù)組
            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多瀏覽器兼容問題補(bǔ)丁
  // 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依賴并導(dǎo)入


    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,
 })

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末柳沙,一起剝皮案震驚了整個濱河市焚碌,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌逢捺,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異宝鼓,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)巴刻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門愚铡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人胡陪,你說我怎么就攤上這事沥寥。” “怎么了柠座?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵邑雅,是天一觀的道長。 經(jīng)常有香客問我妈经,道長淮野,這世上最難降的妖魔是什么捧书? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮骤星,結(jié)果婚禮上鳄厌,老公的妹妹穿的比我還像新娘。我一直安慰自己妈踊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布泪漂。 她就那樣靜靜地躺著廊营,像睡著了一般。 火紅的嫁衣襯著肌膚如雪萝勤。 梳的紋絲不亂的頭發(fā)上露筒,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天,我揣著相機(jī)與錄音敌卓,去河邊找鬼慎式。 笑死,一個胖子當(dāng)著我的面吹牛趟径,可吹牛的內(nèi)容都是我干的瘪吏。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼蜗巧,長吁一口氣:“原來是場噩夢啊……” “哼掌眠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起幕屹,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤蓝丙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后望拖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渺尘,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年说敏,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸥跟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡像云,死狀恐怖锌雀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情迅诬,我是刑警寧澤腋逆,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站侈贷,受9級特大地震影響惩歉,放射性物質(zhì)發(fā)生泄漏等脂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一撑蚌、第九天 我趴在偏房一處隱蔽的房頂上張望上遥。 院中可真熱鬧,春花似錦争涌、人聲如沸粉楚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽模软。三九已至,卻和暖如春饮潦,著一層夾襖步出監(jiān)牢的瞬間燃异,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工继蜡, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留回俐,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓稀并,卻偏偏與公主長得像仅颇,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子碘举,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344