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

創新互聯建站專注于香坊企業網站建設,響應式網站,商城網站定制開發。香坊網站建設公司,為香坊等地區提供建站服務。全流程定制設計，專業設計，全程項目跟蹤，創新互聯建站專業和態度為您提供的服務

環境介紹：

• vue: ^2.5.2

• iview: ^3.1.0

• Webpack: ^3.8.1

前情提要：

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

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

• ie9 以下 對 CSS3 的不兼容，各種不兼容的細節比較多，這里不說明。

• ie10 及以下瀏覽器中不支持 dataset 方法（經學習實踐發現ie11也是不支持的），而我在項目中使用了 iview, iview 的一些組件用到了這個方法。

• ie 瀏覽器是非 webkit 內核，不支持 display: -webkit-box; 和相關樣式；

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

處理過程

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

在終端輸入命令

npm install --save babel-polyfill

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

import 'babel-polyfill'

或者在項目的 webpack.base.conf.js 中配置：

entry: {

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

 },

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

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 后還是報錯，信息如下圖：

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

dataset方法只要能夠加載全局使用即可。我是寫了一個腳本嵌入 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 // 獲取節點的所有屬性
     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 // 返回對象
    }
   })
  }
 }
</script>

搞到這里，我的項目就已經可以在 IE 里出現了，也不打算繼續支持更低的IE版本，坑太深，果斷棄。但是樣式還是有問題。這個搞起來也是很麻煩。點了點項目里出現的樣式問題，未發現很復雜的，主要一個就是 flex 布局出現混亂，經過調整已經好了。還有就是 -webkit-box 不支持，之前顯示數據使用以下方式解決多行溢出省略號顯示問題失效了：
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;

糾結了一下，不想用js 的方式寫，也不想用 偽標簽（高度不好定，易出現文字被覆蓋的情況），也不想特意讓后臺修改返回的數據，所以決定用比較low的相對保險的截取字符的方式展示。

以上是“Vue+iview+webpack中ie瀏覽器兼容處理的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

網頁題目：Vue+iview+webpack中ie瀏覽器兼容處理的示例分析
鏈接分享：http://www.yijiale78.com/article4/gcedoe.html

成都網站建設公司_創新互聯，為您提供標簽優化、App設計、虛擬主機、軟件開發、商城網站、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯