注意:
- vue 只兼容ie8以上版本堂鲜;
- IE 不兼容 axios的promiss對(duì)象;
- IE 不兼容es6語(yǔ)法;
- 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)境,主要用于對(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雕欺、說明:若在項(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)容改成下圖那樣
四、問題如圖:
當(dāng)把這些攻略都做了一遍后例隆,發(fā)現(xiàn)打包完的360的急速模式可以了(本地運(yùn)行還是不可以)甥捺,但是!6撇恪镰禾!ie瀏覽器,360兼容模式唱逢,不管打包還是沒打包吴侦,都不能顯示,完全沒有加載進(jìn)去數(shù)據(jù)坞古,如下圖
并且還報(bào)錯(cuò)以下未定的錯(cuò)
(1)备韧、
查詢后發(fā)現(xiàn),是因?yàn)镮E沒有這個(gè)方法痪枫,不支持sessionStorage织堂,解決的方法是:IE本地調(diào)試用cookie叠艳,或者用webstrom打開項(xiàng)目,但我確實(shí)用的webstorm打開的項(xiàng)目易阳,還是不可以附较,后來找到解決方法,要把es6轉(zhuǎn)es5潦俺!
轉(zhuǎn)換語(yǔ)句:
npm i babel-preset-es2015
并且在項(xiàng)目的根目錄下拒课,修改.babelrc的內(nèi)容,添加'es2015'
安裝
npm i classlist-polyfill
,并且在base.config.js中早像,添加'classlist-polyfill'
然后,npm run dev
肖爵,居然可以了適配了扎酷。
注意: 如果引用了swiper的寶寶,記得要單獨(dú)安裝插件適配IE瀏覽器哦
因?yàn)榇蠹业沫h(huán)境遏匆,裝的依賴,用的組件等等都不相同谁榜,導(dǎo)致遇到的情況可能不一致幅聘,如果有其他要注意兼容的地方出現(xiàn)了,歡迎大家指出窃植,多多題意見