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

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

創(chuàng)新互聯(lián)建站專注于香坊企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站定制開發(fā)。香坊網(wǎng)站建設(shè)公司,為香坊等地區(qū)提供建站服務(wù)。全流程定制設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(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 及以下對 html5 標(biāo)簽不兼容（可以通過引入html5shiv包解決，本文不處理IE11的更低版本，故不提及此法）。

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

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

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

• Polyfill 是 shim 的一種，但他的 API 是遵循標(biāo)準(zhǔn)的。polyfill 的做法通常是：先檢查瀏覽器是否支持某個標(biāo)準(zhǔn) API,如果不支持,就使用舊的技術(shù)對瀏覽器做兼容處理,這樣就可以在舊的瀏覽器上使用新的標(biāo)準(zhǔn) 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 文件中。代碼如下：

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

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

名稱欄目：Vue+iview+webpack中ie瀏覽器兼容處理的示例分析
分享URL：http://m.jiaotiyi.com/article/gcedoe.html