注意：

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

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

1、說明：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)境，主要用于對ES6新語法不支持的瀏覽器）；

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、說明：若在項目中使用了ES6 promise對象，它在Chrome、Safari瀏覽器下可以正常運行，但在360兼容模式、IE內(nèi)核中不支持；

2、安裝：npm install es6-promise；

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

三、步驟詳細圖

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

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

3、最上面引入，確保加載進去。

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

四、問題如圖：

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

并且還報錯以下未定的錯

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

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

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

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

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

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

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

最新評論