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
