注意：

• vue 只兼容ie8以上版本；
• IE 不兼容 axios的promiss對(duì)象;
• IE 不兼容es6語(yǔ)法；
• ES6轉(zhuǎn)ES5

一、關(guān)于babel-polyfill

1、說(shuō)明：This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.（模擬ES2015以上的環(huán)境，主要用于對(duì)ES6新語(yǔ)法不支持的瀏覽器）；

2、安裝：npm install --save babel-polyfill；

3、配置：module.exports = { entry: ["babel-polyfill", "./src/main.js"] };

4、main.js中配置：import 'babel-polyfill' //放在最頂部，確保全面加載。

二、關(guān)于es6-promise

1、說(shuō)明：若在項(xiàng)目中使用了ES6 promise對(duì)象，它在Chrome、Safari瀏覽器下可以正常運(yùn)行，但在360兼容模式、IE內(nèi)核中不支持；

2、安裝：npm install es6-promise；

3、配置：在main.js中加入require('es6-promise').polyfill()，用于在node或?yàn)g覽器中支持ES6 與CommonJS。

三、步驟詳細(xì)圖

1、index引入這句話或者這三句話

2、執(zhí)行npm install --save babel-polyfill；
執(zhí)行完上面語(yǔ)句package.json里面就有了這個(gè)依賴（檢查2部是否執(zhí)行完成的一個(gè)結(jié)果）

3、最上面引入，確保加載進(jìn)去。

4、修改entery里面的內(nèi)容改成下圖那樣

四、問(wèn)題如圖：

當(dāng)把這些攻略都做了一遍后，發(fā)現(xiàn)打包完的360的急速模式可以了（本地運(yùn)行還是不可以），但是?。?！ie瀏覽器，360兼容模式，不管打包還是沒(méi)打包，都不能顯示，完全沒(méi)有加載進(jìn)去數(shù)據(jù)，如下圖

并且還報(bào)錯(cuò)以下未定的錯(cuò)

（1）、查詢后發(fā)現(xiàn)，是因?yàn)镮E沒(méi)有這個(gè)方法，不支持sessionStorage，解決的方法是：IE本地調(diào)試用cookie，或者用webstrom打開項(xiàng)目，但我確實(shí)用的webstorm打開的項(xiàng)目，還是不可以，后來(lái)找到解決方法，要把es6轉(zhuǎn)es5！

轉(zhuǎn)換語(yǔ)句：npm i babel-preset-es2015
并且在項(xiàng)目的根目錄下，修改.babelrc的內(nèi)容，添加'es2015'

發(fā)現(xiàn)不報(bào)未定義的錯(cuò)了，開始報(bào)下圖的錯(cuò)

安裝 npm i classlist-polyfill,并且在base.config.js中，添加'classlist-polyfill'

然后，npm run dev，居然可以了適配了。

注意： 如果引用了swiper的朋友，記得要單獨(dú)安裝插件適配IE瀏覽器哦
因?yàn)榇蠹业沫h(huán)境，裝的依賴，用的組件等等都不相同，導(dǎo)致遇到的情況可能不一致，如果有其他要注意兼容的地方出現(xiàn)了，歡迎大家指出，多多題意見(jiàn)

以上就是Vue項(xiàng)目在IE瀏覽器的兼容問(wèn)題及解決方法的詳細(xì)內(nèi)容，更多關(guān)于Vue IE瀏覽器兼容問(wèn)題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論