突然来的项目上的需求 我们的产品要在ie9上适用，于是 前端朋友们就非常头疼了
身为一个前端开发 估计最头疼的就是 我们要兼容ie 一听到ie ，我想哇的一哭，本来vue用的就是多层嵌套，在火狐的某个版本下面，渲染都有些卡顿，别说是ie了，现在想想，火狐是不是开始堕落了，为了兼容个火狐，有时候都挺费力的，哼，想当年还把他当成开发工具呢。哎呀，差点跑远了，兼容ie就算了，ie11最低限度了吧，还来个ie9，我很蓝瘦，但是还是要好好听话，改改改，兼容ie9
1.ie9不支持跨域
我们访问后台接口 ，都是浏览器自身去走跨域请求，但是ie9不支持跨域，很头疼，于是乎，把tomcat换成nginx，做一个反向代理，Nginx自身做跨域处理，于是 ，浪费了开发一大堆时间去调研Nginx，具体的大家去看看Nginx官网吧，很详细，这里也列不出来
2.私有文件的css样式读不出来
webpack打包过后的css有点太大了，百度都说，ie9只支持多少多少大小的css文件，于是乎，我们又引用了css-split-webpack-plugin，分割css打包过后的文件，但是好像没什么卵用，主要是某些vue文件下面的私有样式被打包到js文件下面去了，应该是做了一定的代码混淆啥的，于是乎，ie9读不懂这个打包过后或者说是混淆过后的js代码里面的css样式啦
于是乎，在打包文件中把extrac: true删了，ie9傻乎乎的终于读懂了
3.ie9下面新开窗口开不了啦
localStorage.setItem('params', JSON.stringify(obj))
const { href } = this.$router.resolve({ name: 'workloadPeg', query: { id: row[id], type: this.type }})
window.open(href, '_blank')
不知道大家在新开窗口的时候是不是这么写的，浏览器累啊，又要开窗口，又要带参数，但是ie9就比较懒了，啥都不想干，也不想开窗口，烦人，于是呢在app.vue
加上这么一大串，检验是否是ie9 是他的话，我们就重写这个vue-router，头疼，ie9你就懒成这样了吗？自己啥都不想干
4.超级无敌巨无霸大坑：console.log
开发代码中，程序员们难免会打印一点有效信息出来，方便调试代码，但是这个ie9他识别不了console这个对象，控制台老是报未知错误，这个还行，控制台报错又不影响客户使用，就是会造成系统有点卡，毕竟人家读不懂console嘛，无语，但是他还有一个恶心的现象，如果我要做页面开新窗口的跳转，还必须得F12打开控制台才能跳成功，不打开就超级慢，5分钟都开不了新窗口，一度我都在怀疑我的新窗口的解决方法是不是有误，但是事实证明那个方法没错滴，于是乎，我想一劳永逸，找了一堆重写console.log的方法都不行，可能是有，只是我还没发现，有发现的大神记得分享给我呀，哈哈哈，于是乎，我花了好长时间，把整个系统代码里的console.log都删了，眼睛都花了，还好有改善，系统相当快，跳转也不用打开控制台了，一把辛酸泪啊，55555----
重写console.log方法：
5.下载报错
红色区域的encodeURI是为了解决ie9下载问题才加上的，其他浏览器 当时是没有加的，注意 ie9 要加，就是他，没加上才导致下载报错
6.上传附件不成功
钻研了2天的组件 以失败告终
<vue-upload
class="pointer"
ref="upload"
v-model="fileList"
:post-action="action"
:headers="headers"
:data="headers"
:multiple="true"
@input-file="inputFile"
@input-filter="inputFilter"
>
<span class="inline-block blue-btn px1">添加附件</span>
</vue-upload>
<div> <div class="mb2" v-for="info of fileList" :key="info.id"> <i class="color-blue at icon-paperclip"/> <span class="color-blue">{{info.name}}</span> <span class="pointer" @click="handleRemove(info)">删除</span> </div> </div>
inputFilter(newFile, oldFile, prevent) {
console.log(newFile)
if (newFile.active && oldFile && !oldFile.active) {
newFile.data.token = this.$store.getters.token
}
}
this.$refs['noticeForm'].validate((valid) => {
if (valid) {
const type = this.noticeId ? 'put' : 'post'
this.fd.req({
type: type,
url: '/basic/api/notices',
data: data
}).then(response => {
const data = response.data || {}
this.action = process.env.BASE_API + '/zuul/basic/api/attachments/owners/' + (this.noticeId ? this.noticeId : data.id)
this.$refs.upload.active = true
this.goBack()
// this.$nextTick(() => {
// // for (const item of this.fileList) {
// // item.active = true
// // }
// })
}).catch(error => {
console.log(error)
})
} else {
return false
}
})
还在解决中，解决好了会分享给大家的
7.el-input placeholder提示语不显示
定位出原因，就是识别不了placeholder
解决方法1：把所有的placeholder用value替代，但是你每次聚焦需要删除（有点复杂）
解决方法2：修改交互方式，用popover取代placeholder，个人意见，仅供大家参考，没准你们的产品也能接收哈，哈哈
8.el-input输了一个错误值没搜到数据，删了重新搜，但是删不掉
（1）安装：npm install --save ie9-oninput-polyfill
（2）main.js里：
import oninputPolyfillfrom 'ie9-oninput-polyfill'
Vue.use(oninputPolyfill);
（3）我这边目前还遗留删除中间文字后，光标会跑到最后，不紧急，暂未处理，处理完成，继续更新哈
9.ie9下面某些svg文件无法显示
解决方法：换成了图片（可能不是根本上的解决，具体原因还未定位到）
原因：已经定位到了 ，是ui导出svg文件的时候出错的
10.css3样式不起作用
-ms-能加就加，是在兼容不了的，也就不能用了
11.中文参数传递到后台请求接口报错
因为中文放在get方法里面会拼接在url上传送到后台请求接口，但是一般浏览器会转码后发送给后台，后台接受编译后的接口，ie9 是无法实现的呢，所以在get请求接口的时候，最好用encodeURI把接口编译一下，可以解决这个问题的哦，大家要注意
网友评论