Vue中iviewIE瀏覽器不兼容報(bào)錯(cuò)怎么辦

這篇文章給大家分享的是有關(guān)Vue中iview IE瀏覽器不兼容報(bào)錯(cuò)怎么辦的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

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

由于Iview編譯使用到了es6的一些新特性，Internet Explorer所有版本中都會報(bào)錯(cuò)，缺少includes、findIxdex等問題。

本人研究涉及到的環(huán)境：VueCli3.2 + iview 3.1.5

在IE中不支持ES6的新特性，例如：includes、findIndex……

以下方案可以解決該問題：

1. Github iview倉儲Issues中提到的

改編譯范圍請用 transpileDependencies: [‘iview']，不要用 include.add，因?yàn)槟J(rèn)配置里用了 exclude，在 webpack 中，多個(gè)條件同時(shí)存在時(shí)需要每個(gè)條件都滿足才執(zhí)行 rule。

但是加了這個(gè)選項(xiàng)后在所有瀏覽器里都會報(bào)錯(cuò)，因?yàn)?iView 里這個(gè)文件不兼容 ES Module。該文件是用很舊版本的 UMD 格式打包的，新版本 UMD 修復(fù)了報(bào)錯(cuò)的問題，但沒有解決和 ES Module 互操作的問題。在 Webpack 4 中，ES Module 不能和 CommonJS / UMD 混用。

所以這里本質(zhì)上是 iView 對 Webpack 4 支持的問題，讓他們把源碼全部轉(zhuǎn)成 ES Module 就好了。
在vue.config.js中添加transpileDependencies: [‘iview']后，可以讓bable編譯過程中檢查iview的代碼，自動添加代碼中用到的polyfill。

但是由于iview中有一個(gè)文件使用的UMD打包，所以編譯后的代碼還是在運(yùn)行環(huán)境中報(bào)錯(cuò)，導(dǎo)致項(xiàng)目無法使用。

該方案雖然解決了ES6語法問題，但是實(shí)際使用會報(bào)錯(cuò)。

2. 直接給代碼添加polyfill

修改bable.config.js使用 useBuiltIns: ‘entry'

module.exports = {presets: [ ['@vue/app', {useBuiltIns:'entry'} ] ]}

在Vue入口文件main中導(dǎo)入bable的polyfill

import'@babel/polyfill';

這種方案bable編譯時(shí)，會自動導(dǎo)入目標(biāo)瀏覽器（browserslist中配置）需要用到的polyfill,可以保證全局代碼使用都可以新ES代碼。但是，也許有些polyfill會一直用不到，額外增加了編譯后的文件體積。

3. 使用balbe env，預(yù)置iview中所需要的polyfill（推薦做法）

修改bable.config.js 添加預(yù)導(dǎo)入的polyfill。目前我的項(xiàng)目中用到的polyfill有'es6.promise'，‘es6.array.find-index'，‘es7.array.includes'，‘es6.string.includes'

module.exports = { presets: [ ['@vue/app', {
  debug:true,
  polyfills: [ 'es6.promise' , 'es6.array.find-index' , 'es7.array.includes' , 'es6.string.includes' ] 
 } ] ]}

這種方案依然使用Vue項(xiàng)目默認(rèn)方案，不同的是在項(xiàng)目編譯時(shí)，會導(dǎo)入polyfills中指定的polyfill，這樣既可解決iview在ie中運(yùn)行報(bào)錯(cuò)的問題。

上面中是我目前用到的幾polyfill，如果需要其它鋪墊，可以自行添加。

感謝各位的閱讀！關(guān)于“Vue中iview IE瀏覽器不兼容報(bào)錯(cuò)怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：Vue中iviewIE瀏覽器不兼容報(bào)錯(cuò)怎么辦
標(biāo)題來源：http://bm7419.com/article14/phojde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、面包屑導(dǎo)航、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、網(wǎng)站排名、靜態(tài)網(wǎng)站

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

猜你還喜歡下面的內(nèi)容