Vue项目在部分ios手机Safari浏览器上打开为白屏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目在部分ios手机Safari浏览器上打开为白屏相关的知识,希望对你有一定的参考价值。

参考技术A Vue项目在部分ios手机Safari浏览器上打开为白屏有可能是一下原因造成:

第一:部分es6语法不兼容     推荐在全局引入 babel-polyfill 解决es6在Safari的兼容问题

第二:有部分Safari浏览器设置了不允许网站读写所有cookie,不允许网站跟踪,这种情况下在项目中使用                localStorage sessionStorage  cookie都会报错(大部分是这个原因)

            查看Safari隐私和安全性:设置-> Safari

第三:在Safari如何跟踪调试

            1、打开手机端web检查器,设置-> Safari ->高级(最底部)-> Web检查器打开

            2、确保iOS系统手机接入 MAC 电脑(必须是Mac,window调试不了ios系统)

            3、找到Mac电脑的 Safari浏览器,找到开发者,就会显示的手机的设备

            4、此时此刻就可以使用了,调试各个App上网页版的页面了。

            注:如果是 Hybrid 嵌入式开发,线上版本,可能就不能调试了,因为IOS App 会把线上的调试功能               给禁用,安全!

(1)ios 调试 H5页面

参考技术A 我们使用safari 浏览器 + ios手机的方式进行页面调试。

打开safari浏览器,并使其处于窗口的最上层。点击顶部工具条的 “Safari浏览器” 选项,选择偏好设置,然后选择高级选项,在弹出框底部勾选 “在菜单栏中显示‘开发’菜单”。

打开手机的设置 - Safari浏览器 - 高级 - 打开网页检查器

手机连接电脑有三个注意点:

1、手机和电脑需要连接在同一个网络中

2、手机用数据线连上电脑

3、如果是vue项目,需要修改一定的配置再启动项目:

原先的配置是localhost,我们需要将其改成电脑的IP,这样手机才能正常访问。

完成以上操作以后,就可以用手机浏览器打开相应的网页,然后在电脑端的 “开发” 选项中就能看到连接的手机,打开网页检查器,这样就能调试H5页面了。

以上是关于Vue项目在部分ios手机Safari浏览器上打开为白屏的主要内容,如果未能解决你的问题,请参考以下文章

Vue单页面在ios10系统上出现白屏的bug

iPhone上调试本地H5代码

iOS Safari浏览器调试WebView

踩坑Safari不兼容webpack封装的vue项目

苹果手机百度跳转怎么关闭

为啥vue打包后出现后 在浏览器上打开的是空白页