Vant ui + Vue 2 Chrome调试不报错、打包发布后苹果系统能正常访问、安卓系统出现全局样式且页面无内容

文章描述了一位开发者遇到的问题,即使用Vantui和Vue2构建的项目在Chrome调试无误,苹果系统运行正常,但Android设备上页面样式缺失且内容无法显示。问题最终定位到SpeechSynthesisUtteranceAPI在微信浏览器中未被支持,导致运行错误。解决方案是移除该API的使用,以确保在所有目标平台上正常运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vant ui + Vue 2 Chrome调试不报错、打包发布后苹果系统能正常访问、安卓系统出现全局样式且页面无内容

chrome 调试:

在这里插入图片描述
无报错信息,能正常访问

苹果系统

在这里插入图片描述
正常显示

Android 系统

无报错
无报错,无页面效果

初步想着加一个 Vconsole 看看日志

结果vconsole 也出不来

翻遍了文档也没找到相关的描述

实在找不到原因,想着会不会浏览器问题,研究一番无果。觉得可能是我用的这几个浏览器都有问题(小米自带浏览器,M浏览器)后来下了edge手机版,chrome 手机版测试后发现能正常访问了。

在这里插入图片描述
Vconsole 也出来了
vconsole也无报错
但是不可能指望着用户安装edge、chrome
所以还是得找问题

原因分析(运气成分较多)

我把 app.vue 中的 <router-view></router-view> 注释掉,把app.vue中有关 router的部分全部注释掉,在 <router-view></router-view>的地方展示了浏览器的 agent 。结果发现微信自带的浏览器报错了(其他浏览器均正常显agent。只是chrome、edge)。
阅读报读信息

Uncaught runtime errors:

×

ERROR

SpeechSynthesisUtterance is not defined ReferenceError: SpeechSynthesisUtterance is not defined at eval

它说 SpeechSynthesisUtterance (SpeechSynthesisUtterance文字转语音用的)不存在。查找微信开发者文档后发现微信浏览器中并未整合该api
到这里就逻辑就能说通了。
Vue报错了 但是因为Router 写死的逻辑强制push 到了页面, 所以error 信息并未展示就被替换了。

解决

由于微信自带浏览器无法使用这个api 所以只能取消了该api的使用。
去除该api 重新打包 上传服务器
在这里插入图片描述
页面能正常访问,Vconsole 也能正常使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值