vue+element ie兼容性問題

divking

不以謀生而編碼，只因熱愛而選擇

​
關注
1、版本兼容性問題

vue 只兼容ie8以上版本；

ie8及以下版本不支持Object.defineProperty方法，但這個是vue實現響應式的所必須的，所以從Vue的源碼來看根本就無法支持IE8

2、IE 不兼容 axios的promiss對象;



在項目中使用了ES6 promise對象



安裝：npm install es6-promise；

3、IE 不兼容es6語法；



IE不支持ES6語法



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



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



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



http網絡請求(跨域)

http 組件使用 axios，xios 對 ie9 版本以下跨域由前端項目打包的解決方案 webpack 代理webpack 的 devServer.proxy的功能實現。



devServer: {



public: "",



// 代理





proxy: {



"/api": {



target: process.env.VUE_APP_USE_IP,



changeOrigin: true,



},



},



},



IE瀏覽器下功能無效

1、dom.click()方法無點擊事件進行下載ie認為是漏洞，判斷下是不是IE瀏覽器，然後特殊處理：



let blob = 'xxx' // blob對象



if (!!window.ActiveXObject || 'ActiveXObject' in window) {



window.navigator.msSaveBlob(blob, imgText + '.png')



} else {



let a = document.createElement('a')



a.setAttribute('href', URL.createObjectURL(blob))



a.clock()



}



：IE11 中app.js報語法錯誤或者缺少‘：’ ‘等

是因為文件裏面還有ES6語法，需要轉換，修改build/webpack.base.conf.js文件



{



test:/\.js$/,



loader:"babel-loader",



include:[



//把這個⽂件添加進去讓他進⾏babel編譯



resolve(



"node_modules/_vue-particles@1.0.9@vue-particles/src/vue-particles"



),



resolve("src"),



resolve("test"),



}



ie11打不開vue項⽬，報錯 “對象不⽀持“addEventListener”屬性或⽅法

在head標籤中加⼊< meta http-equiv=“X-UA-Compatible” content=“IE=EDGE”/>這個屬性主要是設置瀏覽器優先使⽤什麼模式來渲染頁⾯的。代碼IE=edge告訴IE使⽤最新的引擎渲染⽹頁,這個在需要兼容IE瀏覽器的情況下都可以加上這句話。



4、：IE 11 flex:1;樣式會出錯，跟實際想要的效果不同：



因為IE11 flex:1;會識別為flex:1 1 0;⽽其他瀏覽器是flex:1 1 auto;



所以改為width:100%;flex:1 1 auto; 或width:100%;flex-grow:1



4、elementui框架在ie9瀏覽器下的兼容性問題

1、el-select組件內在IE9中會出現下圖樣式錯亂，解決辦法：



// select框固定下拉箭頭兼容ie9



.el-select .el-input .el-input__suffix .el-icon-arrow-up{



-ms-transform: rotate(180deg)\0;



}



2、IE9中elementui的message提示框會出現樣式錯亂，解決方法：



// 兼容ie9，使提示框顯示正常， \0是讓這條代碼只在IE9中生效；



.el-message .el-message__content{



display: inline-block\0;



}



3、IE9中el-cascader組件下拉沒有水平對齊，解決方法：



// ie9 el-cascader兼容性問題



.el-cascader-menu__list .el-cascader-node .el-cascader-node__postfix,



.el-cascader-menu__list .is-active .el-cascader-node__prefix{



top: 10px\0;



}



4、IE9日期組件樣式問題解決方法:



/* 解決IE9 日期組件樣式問題 */



.demonstration, .el-date-editor--datetimerange {



display: inline-block !important;



vertical-align: middle;



line-height: 24px;



}



5、IE9的彈性佈局flex都會失效，凡是在IE9中使用flex的都需要改成float浮動佈局或者使用display: inline-block；屬性來糾正。



6、如果要想使某一行代碼在IE9中生效那麼只需在代碼後面添加 \0 ,例如： float: left\0;

 申請轉載
​
微信
​
朋友圈
​
QQ
​
圖片分享
相關搜索
vuetify和element對比
vue2兼容ie嗎
vue不支持ie
vue2支持ie嗎
vue不兼容ie
vue怎麼兼容ie瀏覽器
享界S9新車上市，上懂車帝第一時間掌握最新資料！
享界S9新車上市，不到40萬起售，快來懂車帝看一手資料吧
懂車帝
懂車帝 的廣告
×
評論

歡迎參與討論
iconiconicon

webpack官網：
https://webpack.js.org/

很遺憾vue2不支持xp系統最高能裝的IE版本IE8。