環(huán)境介紹：

• vue: ^2.5.2
• iview: ^3.1.0
• Webpack: ^3.8.1

前情提要：

• ie 瀏覽器不支持 ES6 Promise 的語法。
• ie8 及以下對 html5 標簽不兼容（可以通過引入html5shiv包解決，本文不處理IE11的更低版本，故不提及此法）。
• ie9 以下 對 CSS3 的不兼容，各種不兼容的細節(jié)比較多，這里不說明。
• ie10 及以下瀏覽器中不支持 dataset 方法（經(jīng)學習實踐發(fā)現(xiàn)ie11也是不支持的），而我在項目中使用了 iview, iview 的一些組件用到了這個方法。
• ie 瀏覽器是非 webkit 內(nèi)核，不支持 display: -webkit-box; 和相關(guān)樣式；
• Polyfill 是 shim 的一種，但他的 API 是遵循標準的。polyfill 的做法通常是：先檢查瀏覽器是否支持某個標準 API,如果不支持,就使用舊的技術(shù)對瀏覽器做兼容處理,這樣就可以在舊的瀏覽器上使用新的標準 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 的配置中，不然不起作用（具體為啥我沒深究），網(wǎng)上查到用到 echarts-v3 的需要配置，經(jīng)測試我用到 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 后還是報錯，信息如下圖：

搜了半天關(guān)于 SCRIPT1003 和 SCRIPT5007 的錯誤, 發(fā)現(xiàn)沒有直接的解決辦法，就主要是說缺少項目中包含的某個模塊的某種方法的引入。于是我就從我主要用到的 iview 入手去查找，發(fā)現(xiàn)了有相關(guān)的內(nèi)容。有說到 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 // 獲取節(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 // 返回對象
    }
   })
  }
 }
</script>

搞到這里，我的項目就已經(jīng)可以在 IE 里出現(xiàn)了，也不打算繼續(xù)支持更低的IE版本，坑太深，果斷棄。但是樣式還是有問題。這個搞起來也是很麻煩。點了點項目里出現(xiàn)的樣式問題，未發(fā)現(xiàn)很復雜的，主要一個就是 flex 布局出現(xiàn)混亂，經(jīng)過調(diào)整已經(jīng)好了。還有就是 -webkit-box 不支持，之前顯示數(shù)據(jù)使用以下方式解決多行溢出省略號顯示問題失效了：
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 的方式寫，也不想用 偽標簽（高度不好定，易出現(xiàn)文字被覆蓋的情況），也不想特意讓后臺修改返回的數(shù)據(jù)，所以決定用比較low的相對保險的截取字符的方式展示。

總結(jié)

第一次處理這個問題，很多東西不明白，描述也不大清楚，處理的不全面，還望多交流指正！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論