環(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ò)，信息如下圖：

搜了半天關(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)的截取字符的方式展示。

總結(jié)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論