解决 Vue 浏览器兼容 edge safari ie 问题

Posted 2023-03-29

参考技术A

最近做的一个Vue项目，遇到了在Edge浏览器，Safari（version: 9.xx）浏览器上打不开的问题。分别有以下报错：
Safari Error:

Edge Error:

const 和 ...（spread operator）语法都是ES6语法，这说明在Edge和safari 9 浏览器下都不支持ES6语法。带着这个判断，我去查了一下es6的浏览器支持情况，果不其然，safari10以下和Edge14以下 和 IE 都不支持es6语法，具体ES6浏览器支持情况请参考以下表格：
Browser Support for ES6 (ECMAScript 2015)

找到问题的原因在于浏览器不支持ES6语法，所以需要使用Babel去编译。接下来是如何在前端项目中配置babel，使能够将ES6编译成ES5语法：

注意 ： 所有使用到了ES6语法的文件都需要配置在以上的 module> rules> include 里面。
重新运行项目，刷新浏览器发现页面恢复正常。

这篇文章涉及到的前端技术包括： ES6的新特性 ， babel的配置 ，等等。感兴趣的同学可以查看我的其他文章或者自行学习。
参考文献： From ES5 to ESNext

vueh5兼容safari底部遮罩问题

1. 是存在兼容性问题的，VueH5在Safari浏览器中打开时，底部可能会出现遮罩的问题。

2. 这是因为Safari浏览器在处理移动端viewport时，会将虚拟键盘的高度也算在内，导致页面出现了底部遮罩。

3. 解决方法可以通过监听虚拟键盘的弹出和关闭事件，根据实际高度来修改页面的高度，或者使用CSS hack，比如在body元素上添加样式“height: -webkit-fill-available;”来解决这个问题。 参考技术A vueh5兼容safari底部遮罩问题的解决方案：
1、使用CSS3的transform属性，在页面中添加transform: translate3D(0, 0, 0);
2、使用JS操作来解决，可以在页面加载完成后，设置body的min-height属性，使得页面可以滚动；
3、使用CSS3的flex布局，将页面中的元素放置在Flex容器中，并设置flex-shrink: 0;
4、使用overflow-scrolling: touch;属性，来让元素滚动更流畅。