html引入vue不兼容ie11,Vue在IE11版本浏览器中的兼容性问题

一: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']

17a381b3d309

然后再main.js中直接引入:  import 'babel-polyfill'   最好放在第一个引入

17a381b3d309

完成上述一系列操作之后,在IE11浏览器中重新跑下项目,你就会发现,你辛苦做的页面出现了!

如果还没出现  不妨检查一下  看看自身项目中是否还有其它使用了es6却没有添加在babel-loader转化配置中的  例如保存静态文件的文件夹static 则需要:

17a381b3d309

另外引入的一些组件也可能存在这方面的问题  找到并添加进去就ok了  到这里ie11的兼容基本上就差不多了 接下来谈谈我自己项目中遇到的其它问题  欢迎探讨

2、vue  v-model绑定computed的问题   在Chrome中是支持v-model直接绑定computed值的  但是在ie11中  计算属性中必须有get属性  例如:

17a381b3d309

如果无需v-model绑定   可以直接采用:value绑定computed  则无需改造computed

3、在ie11浏览器中访问网页  最好使用ip地址访问   localhost时不时会出现莫名的错误

4、在ie11中  window,print()  打印网页时  自带的网页信息会显示在页眉和页脚  在Chrome浏览器中  可以通过图一的方式去除

17a381b3d309

图一

但是在ie11中  页眉页脚脱离文档流  且展示在页面最上层  正在寻求解决方案

5、在ie11中src属性接收的值如果是错误的ip地址格式则会报错  例如http://192.168.3.71:8083null  后者http://192.168.3.71:8083undefined

17a381b3d309

自身项目错误示例:在home.vue中img引入的后端返回头像  在正确的ip地址后边拼接后端返回的空值或者无效值

17a381b3d309

7、IE11上router-link无法跳转,主要是因为当url的hash change的时候,浏览器没有做出相应。这时候需要做一个兼容,当浏览器是IE11时手动给url加一个hashChange事件

下面是在网上找的两种方法

第一种:

17a381b3d309

第二种:直接添加在main.js入口文件的最后即可

17a381b3d309

8、如果ie11中get请求一直从缓存中获取   则可以在请求头中添加'Pragma', 'no-cache'

17a381b3d309

//当只设置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)

相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值