html的vue项目怎么兼容ie,vue 项目在ie浏览器的兼容问题
注意:html
vue 只兼容ie8以上版本;
IE 不兼容 axios的promiss對象;
IE 不兼容es6語法;
ES6轉ES5
1、關于babel-polyfillvue
一、說明: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以上的環境,主要用于對ES6新語法不支持的瀏覽器);node
二、安裝:npm install --save babel-polyfill;ios
三、配置:module.exports = { entry: ["babel-polyfill", "./src/main.js"] };es6
四、main.js中配置:import 'babel-polyfill' //放在最頂部,確保全面加載。web
2、關于es6-promisenpm
一、說明:若在項目中使用了ES6 promise對象,它在Chrome、Safari瀏覽器下能夠正常運行,但在360兼容模式、IE內核中不支持;json
二、安裝:npm install es6-promise;axios
三、配置:在main.js中加入require('es6-promise').polyfill(),用于在node或瀏覽器中支持ES6 與CommonJS。promise
3、步驟詳細圖
一、index引入這句話或者這三句話
二、執行npm install --save babel-polyfill;
執行完上面語句package.json里面就有了這個依賴(檢查2部是否執行完成的一個結果)
三、最上面引入,確保加載進去。
四、修改entery里面的內容改為下圖那樣
4、問題如圖:
當把這些攻略都作了一遍后,發現打包完的360的急速模式能夠了(本地運行仍是不能夠),可是!!!ie瀏覽器,360兼容模式,無論打包仍是沒打包,都不能顯示,徹底沒有加載進去數據,以下圖
而且還報錯如下未定的錯
(1)、
查詢后發現,是由于IE沒有這個方法,不支持sessionStorage,解決的方法是:IE本地調試用cookie,或者用webstrom打開項目,但我確實用的webstorm打開的項目,仍是不能夠,后來找到解決方法,要把es6轉es5!
轉換語句:npm i babel-preset-es2015
而且在項目的根目錄下,修改.babelrc的內容,添加'es2015'
發現不報未定義的錯了,開始報下圖的錯
安裝 npm i classlist-polyfill,而且在base.config.js中,添加'classlist-polyfill'
而后,npm run dev,竟然能夠了適配了。
注意: 若是引用了swiper的寶寶,記得要單獨安裝插件適配IE瀏覽器哦
由于你們的環境,裝的依賴,用的組件等等都不相同,致使遇到的狀況可能不一致,若是有其余要注意兼容的地方出現了,歡迎你們指出,多多題意見
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的html的vue项目怎么兼容ie,vue 项目在ie浏览器的兼容问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 电影淮海战役粟裕司令部最后跳的什么舞
- 下一篇: 国防科大天河计算机应用,国防科大计算机学