一：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请求从缓存中获取的方法请参考：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)