一：Vue 2.x cli
1、 使用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请求从缓存中获取的方法请参考：https://blog.csdn.net/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') {
let dowUrl = ev.target.href
let reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/
if (reg.test(dowUrl)) {
ev.target.href = dowUrl.split('').map((item) => {
if (reg.test(item)) {
return encodeURIComponent(item)
} else {
return item
}
}).join('')
}
}
})
}
同时后端在回传下载文件时 文件名为汉子的 下载下来也会乱码 这里需要后端回传文件时对响应头中的fileName做编码处理 以下贴出参考：
@RequestMapping(
value = {"/download/export"},
method = {RequestMethod.GET, RequestMethod.POST}
)
@Override
public String downloadExport(@RequestParam("filepath") String filepath, HttpServletRequest request, HttpServletResponse response) {
if (StringUtils.isEmpty(filepath)) {
return null;
} else {
if (filepath.startsWith("/")) {
filepath = filepath.substring(1);
}
String rootPath = FileUtils.getDownTmpRoot();
String exportFilepath = rootPath + filepath;
this.outputStream(request, response, "application/octet-stream", exportFilepath);
return null;
}
}
@Override
protected void outputStream(HttpServletRequest request, HttpServletResponse response, String contentType, String filepath) {
if (!StringUtils.isEmpty(filepath)) {
InputStream input = null;
OutputStream output = null;
File file = null;
try {
file = new File(filepath);
if (file.exists()) {
response.setCharacterEncoding("UTF-8");
response.setContentType(contentType);
response.setHeader("Content-disposition", "attachment; filename=" + URLEncoder.encode(file.getName(),"utf-8"));
input = new FileInputStream(file);
output = response.getOutputStream();
IOUtils.copy(input, output);
return;
}
} catch (Exception var18) {
return;
} finally {
IOUtils.closeQuietly(input);
IOUtils.closeQuietly(output);
try {
org.apache.commons.io.FileUtils.deleteQuietly(file);
} catch (Exception var17) {
}
}
}
}
12、ie11 不支持flex: 1 的写法 如有需要请规范书写 flex：1 1 auto
13、ie11不支持new Date(2021-3-1)是不支持的 需要将 - 换成 / 例如：new Date(2021/3/1)
