一：Vue 2.x cli1、 使用vue2.0的项目在IE11版本浏览器中是空白的 或者路由跳转但是而页面显示依旧是上一个路径的页面元素 这是因为ie11不支持es6 而我们之前有使用的babel-loader 它仅是将es6的语法转为es5 却不会去转换es6的新属性 例如promise 所以此时我们需要使用到babel-polyfill 以下是具体操作方法
首先用cnpm 安装babel-polyfill npm install --save-dev babel-polyfill
然后在webpack.base.conf.js文件中修改module.exports中的entry，添加babel-polyfill: app: ['babel-polyfill', './src/main.js']
然后再main.js中直接引入：import 'babel-polyfill' 最好放在第一个引入
完成上述一系列操作之后，在IE11浏览器中重新跑下项目，你就会发现，你辛苦做的页面出现了！
如果还没出现 不妨检查一下 看看自身项目中是否还有其它使用了es6却没有添加在babel-loader转化配置中的 例如保存静态文件的文件夹static 则需要：
另外引入的一些组件也可能存在这方面的问题 找到并添加进去就ok了 到这里ie11的兼容基本上就差不多了 接下来谈谈我自己项目中遇到的其它问题 欢迎探讨
2、vue v-model绑定computed的问题 在Chrome中是支持v-model直接绑定computed值的 但是在ie11中 计算属性中必须有get属性 例如：
如果无需v-model绑定 可以直接采用:value绑定computed 则无需改造computed
3、在ie11浏览器中访问网页 最好使用ip地址访问 localhost时不时会出现莫名的错误
4、在ie11中 window,print() 打印网页时 自带的网页信息会显示在页眉和页脚 在Chrome浏览器中 可以通过图一的方式去除
图一
但是在ie11中 页眉页脚脱离文档流 且展示在页面最上层 正在寻求解决方案
5、在ie11中src属性接收的值如果是错误的ip地址格式则会报错 例如http://192.168.3.71:8083null 后者http://192.168.3.71:8083undefined
自身项目错误示例：在home.vue中img引入的后端返回头像 在正确的ip地址后边拼接后端返回的空值或者无效值
7、IE11上router-link无法跳转，主要是因为当url的hash change的时候，浏览器没有做出相应。这时候需要做一个兼容，当浏览器是IE11时手动给url加一个hashChange事件
下面是在网上找的两种方法
第一种：
第二种：直接添加在main.js入口文件的最后即可
8、如果ie11中get请求一直从缓存中获取 则可以在请求头中添加'Pragma','no-cache'
//当只设置cacahe-control: 'no-cache'时，IE浏览器始终返回304，抓包工具抓不到包，请求不和服务器确认
//当只设置cacahe-control: 'no-cache'时，google浏览器始终返回200，抓包工具可以抓取包，请求重新从服务器获取数据，没有利用到浏览器的缓存功能 'cache-control': 'no-cache',
//当只设置Pragma: 'no-cache'时，IE浏览器始终返回200，抓包工具可以抓到所有包，请求重新从服务器获取数据，没有利用到浏览器的缓存功能
//当只设置Pragma: 'no-cache'时，google浏览器始终返回200，抓包工具可以抓到所有包，请求重新从服务器获取数据，没有利用到浏览器的缓存功能 'Pragma': 'no-cache'
//两个参数同时不设置时，IE浏览器始终返回304，抓包工具抓不到包，请求不和服务器确认
//两个参数同时不设置时，google浏览器首次返回200，之后始终返回304，并且有和服务器确认
//两个参数同时设置时，IE浏览器始终返回200，抓包工具可以抓到所有包，请求重新从服务器获取数据，没有利用到浏览器的缓存功能
//两个参数同时设置时，google浏览器始终返回200，抓包工具可以抓到所有包，请求重新从服务器获取数据，没有利用到浏览器的缓存功能
更多关于避免get请求从缓存中获取的方法请参考：/weixin_36861725/article/details/82840097
9、在ie11中如果使用的flex布局中 元素必须有height属性否则一些属性不生效例如：-webkit-box-align：center、-webkit-align-items：center。切min-height不会被视为height
10、在ie11中不支持document.body.append(‘$el’)，请使用document.body.appendChiled('$el'),在ie11中不支持$el.remove()，请使用$el.removeNode(true), 到那时谷歌不支持$el.removeNode(true), 这里需要做ie11和谷歌的兼容
11、ie11请求路径上的汉子不会被浏览器编码 只会乱码导致接口404 例如A标签下载路径或者哈希值中的参数有汉字都会乱码，这里需要前端自行编码请求，后端收到请求是解码后的url无需处理 以下是a标签全局编码汉子的写法
if(window.navigator.userAgent.indexOf('Trident')>=0){
window.addEventListener('click',(ev)=>{
if(ev.target.nodeName==='A'){
letdowUrl=ev.target.href
letreg=/[\u4E00-\u9FA5\uF900-\uFA2D]/
if(reg.test(dowUrl)){
ev.target.href=dowUrl.split('').map((item)=>{
if(reg.test(item)){
returnencodeURIComponent(item)
}else{
returnitem
}
}).join('')
}
}
})
}
同时后端在回传下载文件时 文件名为汉子的 下载下来也会乱码 这里需要后端回传文件时对响应头中的fileName做编码处理 以下贴出参考：
@RequestMapping(
value={"/download/export"},
method={RequestMethod.GET,RequestMethod.POST}
)
@Override
publicStringdownloadExport(@RequestParam("filepath")Stringfilepath,HttpServletRequestrequest,HttpServletResponseresponse){
if(StringUtils.isEmpty(filepath)){
returnnull;
}else{
if(filepath.startsWith("/")){
filepath=filepath.substring(1);
}
StringrootPath=FileUtils.getDownTmpRoot();
StringexportFilepath=rootPath+filepath;
this.outputStream(request,response,"application/octet-stream",exportFilepath);
returnnull;
}
}
@Override
protectedvoidoutputStream(HttpServletRequestrequest,HttpServletResponseresponse,StringcontentType,Stringfilepath){
if(!StringUtils.isEmpty(filepath)){
InputStreaminput=null;
OutputStreamoutput=null;
Filefile=null;
try{
file=newFile(filepath);
if(file.exists()){
response.setCharacterEncoding("UTF-8");
response.setContentType(contentType);
response.setHeader("Content-disposition","attachment;filename="+URLEncoder.encode(file.getName(),"utf-8"));
input=newFileInputStream(file);
output=response.getOutputStream();
IOUtils.copy(input,output);
return;
}
}catch(Exceptionvar18){
return;
}finally{
IOUtils.closeQuietly(input);
IOUtils.closeQuietly(output);
try{
mons.io.FileUtils.deleteQuietly(file);
}catch(Exceptionvar17){
}
}
}
}
12、ie11 不支持flex: 1 的写法 如有需要请规范书写 flex：1 1 auto
13、ie11不支持new Date(-3-1)是不支持的 需要将 - 换成 / 例如：new Date(/3/1)
