Vue+iview+webpack中ie瀏覽器兼容處理的示例分析

這篇文章主要介紹Vue+iview+webpack中ie瀏覽器兼容處理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專注于香坊企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站定制開發(fā)。香坊網(wǎng)站建設(shè)公司,為香坊等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

環(huán)境介紹：

  • vue: ^2.5.2

  • iview: ^3.1.0

  • Webpack: ^3.8.1

前情提要：

  • ie 瀏覽器不支持 ES6 Promise 的語法。

  • ie8 及以下對(duì) html5 標(biāo)簽不兼容（可以通過引入html5shiv包解決，本文不處理IE11的更低版本，故不提及此法）。

  • ie9 以下 對(duì) CSS3 的不兼容，各種不兼容的細(xì)節(jié)比較多，這里不說明。

  • ie10 及以下瀏覽器中不支持 dataset 方法（經(jīng)學(xué)習(xí)實(shí)踐發(fā)現(xiàn)ie11也是不支持的），而我在項(xiàng)目中使用了 iview, iview 的一些組件用到了這個(gè)方法。

  • ie 瀏覽器是非 webkit 內(nèi)核，不支持 display: -webkit-box; 和相關(guān)樣式；

  • Polyfill 是 shim 的一種，但他的 API 是遵循標(biāo)準(zhǔn)的。polyfill 的做法通常是：先檢查瀏覽器是否支持某個(gè)標(biāo)準(zhǔn) API,如果不支持,就使用舊的技術(shù)對(duì)瀏覽器做兼容處理,這樣就可以在舊的瀏覽器上使用新的標(biāo)準(zhǔn) API。比如,舊瀏覽器不支持 ES6 的 Array.prototype.find 方法,我們想要在項(xiàng)目中使用 Array.prototype.find,只要 polyfill 就行了,而不是封裝一個(gè)新的方法。

處理過程

1、安裝 polyfill 組件，使瀏覽器兼容 es6 的寫法

在終端輸入命令

npm install --save babel-polyfill

main.js 頭部引入 babel-polyfill， 注意這個(gè)放最前面：

import 'babel-polyfill'

或者在項(xiàng)目的 webpack.base.conf.js 中配置：

entry: {

  app:['babel-polyfill','./src/main.js']

 },

另外，引入的一些模塊需要單獨(dú)引入到 babel 的配置中，不然不起作用（具體為啥我沒深究），網(wǎng)上查到用到 echarts-v3 的需要配置，經(jīng)測(cè)試我用到 iview 也是要配置的, 下面代碼的 include 中就是我配置的項(xiàng)，這個(gè)主要是按需配置的，具體看項(xiàng)目里的情況：

module: {

  rules: [

   ...(config.dev.useEslint ? [createLintingRule()] : []),

   {

    test: /\.vue$/,

    loader: 'vue-loader',

    options: vueLoaderConfig

   },

   {

    test: /\.js$/,

    loader: 'babel-loader',

    include: [

     resolve('src'), 

     resolve('test'), 

     resolve('static'),

     resolve('node_modules/webpack-dev-server/client'),

     // resolve('node_modules/vue-echarts'),

     resolve('node_modules/iview/src'),

     // resolve('node_modules/resize-detector')

    ]
   },
}

2、兼容 dataset

我在引入了 babel-polyfill 后還是報(bào)錯(cuò)，信息如下圖：

Vue+iview+webpack中ie瀏覽器兼容處理的示例分析

搜了半天關(guān)于 SCRIPT1003 和 SCRIPT5007 的錯(cuò)誤, 發(fā)現(xiàn)沒有直接的解決辦法，就主要是說缺少項(xiàng)目中包含的某個(gè)模塊的某種方法的引入。于是我就從我主要用到的 iview 入手去查找，發(fā)現(xiàn)了有相關(guān)的內(nèi)容。有說到 iview 兼容 IE 需要寫一個(gè) dataset 方法才能正常加載。

dataset方法只要能夠加載全局使用即可。我是寫了一個(gè)腳本嵌入 index.html 文件中。代碼如下：

<script>
 // dataset 方法兼容 IE 瀏覽器。ie10及以下不支持dataset
 if (window.HTMLElement) {
  if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
   Object.defineProperty(HTMLElement.prototype, 'dataset', {
    get: function () {
     var attributes = this.attributes // 獲取節(jié)點(diǎn)的所有屬性
     var name = []
     var value = [] // 定義兩個(gè)數(shù)組保存屬性名和屬性值
     var obj = {} // 定義一個(gè)空對(duì)象
     for (var i = 0; i < attributes.length; i++) { // 遍歷節(jié)點(diǎn)的所有屬性
      if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果屬性名的前面5個(gè)字符符合"data-"
       // 取出屬性名的"data-"的后面的字符串放入name數(shù)組中
       name.push(attributes[i].nodeName.slice(5));
       // 取出對(duì)應(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 // 返回對(duì)象
    }
   })
  }
 }
</script>

搞到這里，我的項(xiàng)目就已經(jīng)可以在 IE 里出現(xiàn)了，也不打算繼續(xù)支持更低的IE版本，坑太深，果斷棄。但是樣式還是有問題。這個(gè)搞起來也是很麻煩。點(diǎn)了點(diǎn)項(xiàng)目里出現(xiàn)的樣式問題，未發(fā)現(xiàn)很復(fù)雜的，主要一個(gè)就是 flex 布局出現(xiàn)混亂，經(jīng)過調(diào)整已經(jīng)好了。還有就是 -webkit-box 不支持，之前顯示數(shù)據(jù)使用以下方式解決多行溢出省略號(hào)顯示問題失效了：
overflow: hidden;

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

word-break: break-all;

糾結(jié)了一下，不想用js 的方式寫，也不想用 偽標(biāo)簽（高度不好定，易出現(xiàn)文字被覆蓋的情況），也不想特意讓后臺(tái)修改返回的數(shù)據(jù)，所以決定用比較low的相對(duì)保險(xiǎn)的截取字符的方式展示。

以上是“Vue+iview+webpack中ie瀏覽器兼容處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：Vue+iview+webpack中ie瀏覽器兼容處理的示例分析
鏈接分享：http://muchs.cn/article4/gcedoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、App設(shè)計(jì)、虛擬主機(jī)、軟件開發(fā)、商城網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)