vue项目ios(苹果)系统打开显示空白页问题

【案例】【技术难点(已解决)】vue 线上项目访问本地资源 访问不到、跨域等问题的解决方法 更详细的video标签属性介绍:https://www.runoob.com/tags/tag-video.html。对于项目如何打包上线,这里笔者就不多说啦,因为会遇到这个需求的肯定会布署项目。真正需求就是要访问本地多个视频已打包好的项目中播放并循环播放。nginx.conf中的指定存放资源的路径是否正确;在访问线上项目,从访问的电脑本地获取资源。video_url是为了动态获取访问地址;autoplay表示视频准备好就播放;nginx启动成功,但访问不到资源。前面两个都没问题,就是项目访问不到。 阅读详情

 

报错信息:

SyntaxError: Invalid regular expression: invalid group specifier name

翻译:语法错误:无效的正则表达式:无效的组说明符名称。

注:我这里是正则验证报错(网上还有其他报错显示空白页的问题,以后遇到会及时和大家更新)。

原因(本篇原因正则问题):

项目中如果有使用到正则表达式,在Safari浏览器会在某个正则规则下无法解析出来,就会出现:

 SyntaxError:Invalid regular expression: invalid group specifier name的错误,然后整个网页就会空白。

解决方式

直接把正则包在/..../里面是会出错的,必须要用new RegExp("......", 'g')包起來才可以,并且有使用到\d的都要用两个斜线取代\\d

可能造成的原因:

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 会把线上的调试功能给禁用,安全!

参考文章:

Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name | Penueling 磐凌科技Vue项目在部分ios手机Safari浏览器上打开为白屏_百度知道Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name | Penueling 磐凌科技

有用的话请点赞,关注加收藏哦(。・ω・。)ノ♡

使用Babel解决ES6在不支持的浏览器中的兼容性问题 Babel是一个广泛使用的JavaScript编译器,它可以将新版本的JavaScript代码转换为向后兼容的旧版本代码。它是一个开源工具,由社区驱动,并且具有强大的插件系统,可以根据项目的需求进行配置和扩展。Babel可以帮助我们在不同的浏览器和环境中运行最新的JavaScript代码。 阅读详情

相关推荐

vue2 | vue3 - 解决html2canvas苹果ios系统保存图片到相册空白问题,真机IOS系统动态截图无法保存到相册或白屏vue html2canvas ios系统保存图片空白啥也不显示

vue2,vue3,html2canvas,苹果ios系统,保存到相册失败,保存至相册发现是一张白图,如何解决html2canvas动态图片ios空白,html2canvas ios系统保存图片空白问题,部分iphone手机机型出现空白,生成图片后使用html2canvas截图时回显的照片是空白的,保存到相册报错,解决低版本ios使用html2canvas截图空白问题ios系统保存图片空白问题,在ios13版本生成图片失效,保存的图片空白,使用html2canvas截图/保存图片到手机相册时出现空白图片的

✅ 精选推荐文章 6481

安卓正常,ios报错invalid group specifier name

问题表现 微信小程序代码在安卓端执行正常,在ios端报错SyntaxError: Invalid regular expression: invalid group specifier name Stack: (native code) 原因 1、格式不对 // 错误格式 let reg = /(?<=\d{3})\d{4}(?=\d{4})/; // 正确格式 let reg = /(?<=\\d{3})\\d{4}(?=\\d{4})/; 注意两点: 1.用//包裹改为用""包

cwjxyp的博客 6035

PINN疲劳寿命预测优化

项目基于物理信息神经网络(PINN)构建材料疲劳寿命预测模型,通过融合Paris裂纹扩展方程与实验数据,实现裂纹扩展行为的精准预测。核心方法包括:1)将Paris方程作为物理约束嵌入神经网络训练;2)生成含噪声的模拟数据并进行归一化处理;3)采用PINN-GA联合优化框架,以裂纹扩展速率最小化为目标优化材料参数。该方案通过物理规律与数据驱动的结合,显著提升预测模型的泛化能力,为工程材料寿命评估提供新思路。

huanghm88的专栏 127

SyntaxError: Invalid regular expression: invalid group specifier name

这是因为Safari浏览器不支持两种 //格式的正则表达式零度断言:?<= , ?<! 解决: 使用构造函数代替 // 格式 ```javascript let reg = /ab?<=cd/ 改写成 let reg = new RegExp('ab(?<=cd)')

m0_46430338的博客 5022

前端系列 - SyntaxError: Invalid regular expression: invalid group specifier name. safari和ios报错

其实这个问题 我当初在谷歌上测试的好好的 然后就上safari进行测试。页面直接变成空白了 就是报的这个错误 一看说我那个正则表达式那里写错了。 查了查 才知道 原来ios 对js中正则表达式的 几个新增的断言验证不支持(?!)零宽负向先行断言 (?=)零宽先行断言 (?<=)零宽后行断言 (?<!)零宽负向后行断言。 这四个玩意 如果你的正则中用的话 建议更改。 上面的那个正则也就在谷歌中进行了支持。 其实看望网上的有的文档说 换成 构造函数类型的就可以。我试试了还是不行,除非换成其他

知行 2903

vue-cli + vue3 项目 ios 苹果手机白屏问题

vue-cli + vue3 项目 ios 苹果手机白屏问题

qq_40147756的博客 2926

vue项目使用Hbuilder打包苹果IOS-App详细教程

本文主要记录一下本人使用vue开发的移动端App使用Hbuilder打包成苹果IOS-App的详细步骤,仅供参考,如有不足,请指教。 打包苹果IOSapp首先需要准备以下几项东西: 1、已经编写好的vue项目。 2、电脑上安装好Hbuilder。 3、下载好爱思助手,及准备苹果手机一台。 4、安装好Appuploader。 5、注册苹果开发者账号(个人、企业均可)。 介绍一下个人开发者账号: 苹果开发者账号类型.png 再说下什么是免费的苹果开发者账号,就是你没交688年费的就是免费账.

Gabriel的专栏 6089

h5 判断 ios android,vue中h5端打开app(判断是安卓还是苹果)

1.开发环境 vue+vant2.电脑系统 windows10专业版3.在h5端开发的过程中,我们经常需要点击一个按钮来判断用户使用安装了app(首先判断是安卓还是苹果,然后判断是否安装了app,如果没有安装则跳转到下载页面,如果安装了则打开)。4.废话不多说,直接上代码:Open APP5.在methods中添加如下代码:openapp() {var u = navigator.userAgen...

weixin_39775127的博客 2255

Vue项目设置背景图片,IOS图片显示不出

Vue项目开发中,有时候我们要向页面中添加一些背景图片,可是当我们在样式中添加了背景图片,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,列如下面的CSS样式就会出现报错: background:url("../../assets/image/laosiji.jpg"); 在node中有一种解决这个问题的方式,如下: (1)在template中我们先这样写上: &...

WanFengZhou 5845

vue h5 项目适配ios问题

vue h5项目适配ios问题 h5项目在安卓上运行正常,但是在ios上就出现问题 1适配iphoneX以上型号底部栏遮挡的问题 @media (min-device-height: 810px) { padding-bottom: .5rem; } 2ios页面缩放问题 在index.html页面<head>标签里面加入如下<meta> <meta na...

shiyutim 2630

vueIOS苹果自动定位问题 vue-baidu-map首次进入无法定位问题

最近在用vue开发应用,要用到百度地图,基本功能都有实现过,但是到vue上用的一个vue-baidu-map封装组件,官网:https://dafrok.github.io/vue-baidu-map/#/zh/index,点击进去就是使用文档,但是有很多坑,需要自己去碰坑,填坑,用坑了 //百度地图 importBaiduMapfrom'vue-baidu-map' Vue....

追梦猪的博客 1707

vue项目苹果ios12系统手机,输入框键盘回弹留下了空白遮罩的处理方式

1、问题表现:H5开发,下单页面,下图所示,在ios 12系统苹果手机端,在输入电话号,之类信息,经常点击去支付没有任何反应,页面上下滑动,再点击,就可以支付 2、原因分析:结合页面表现,查了网上资料,ios12系统键盘回收后会留下一个透明的遮罩层,在点击页面底部,点击事件没法穿透遮罩层,相当于事件被拦截了。 3、处理方式,项目用的vue开发的,处理思路:在input失去焦点后,页面上下滚动1...

weixin_44330517的博客 2532

再见IOS调试,如何不用苹果系统调试ios

使用dcloud开发了h5+app,其它还好,就是ios调试非要苹果系统才行,电脑性能不行,装模拟器失败 何不写一个隐藏页面用eval执行js代码,以此来调试ios呢? <template> <div> <div>测试</div> <textarea v-model="code" style="width:100vw;height:50vh" /> <button @click="doit">执行&l.

悟也执迷的博客 472

解决vue低版本ios,安卓手机浏览器打开H5页面空白的问题

低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一般网上说的流程较为顺利,但是我的看了后面你绝对有所收获,看过不后悔想再来一回 步骤一(较为顺利的解决方案) 1.执行 npm install babel-polyfill 安装一下 babel...

qq_39963516的博客 1万+

vue项目白屏问题汇总,多方案详细解决

来了,兄弟,别急,咱们慢慢往下看。 项目打包之后,本地打开文件显示白屏了? 微信公众号里打开项目白屏了? 苹果手机打开白屏了? 死活都有部分iPhone机型是白屏显示的? 兄弟,别急,咱们走起…… 1,ios10 出现白屏 原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下: 进入build文件夹; 找到w...

小圣贤君的博客 1万+

Vue项目用于Ios和Android端开发

起因 前公司商城App项目使用的是H5开发,有微信公众号、Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求。而Ios和Android端通过webview加载h5文件显示,App的原生功能和H5交互的代码写得有些凌乱,在我接手项目后老板完全没给重构的时间,所以只能在做新功能的时候顺手一点点的重构。后来要做一个与原先的商城相对独立的新商城,而...

疾风剑豪 1839

关于在vue当中,ios手机不显示图片,需要刷新解决问题

出现的bug是,在vue当中使用v-html渲染页面,图片使用了 &lt;div v-lazy-container="{ selector: 'img' }"&gt; &lt;div class="content" v-html="newsContent" &gt;&lt;/div&gt; &lt;/div&gt; ios手机图片不能正常显示,于是去掉了图片的懒加

weixin_42489783的博客 5941

解决vue 界面在苹果手机上滑动点击事件等卡顿问题

vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题(1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。 //页面布局 &lt;template&gt;  &lt;div class='content'...

weixin_40716786的博客 1972

vue项目移动端苹果底部黑线遮挡自适配的问题

vue项目解决移动端苹果底部黑线遮挡自适应的问题!!!

Ljs2000324的博客 1577

c++ webrtc基础(1) :webrtc源码下载与编译、项目模块介绍、学习资料推荐

本篇博客介绍webrtc源码的下载与编译,以及推荐webrtc学习资料。 源码下载 电脑环境:win10/win11 64bit,合理的上网环境,没有合理的网络环境无法拉取、下载webrtc代码和工具,宽带速度要快,尽量50M. 主要步骤如下: (1) 安装git (2) 打开cmd控制台,下载google开发工具depot_tools: git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git (3) 新建一个目

琅嬛福地 3240

背包_自行车_行人_行李箱_手推车_轮椅目标检测数据集.zip

背包自行车行人行李箱手推车_轮椅目标检测数据集一、基础信息数据集名称:背包自行车行人行李箱手推车_轮椅目标检测数据集 图片数量: - 训练集:1,324张图片 - 验证集:291张图片 - 总计:1,615张图片 分类类别: - Backpack(背包):日常使用的双肩背包或旅行背包 - Bicycle(自行车):两轮交通工具 - Person(行人):场景中出现的人物 - Suitcase(行李箱):旅行用拉杆箱或手提箱 - Trolley(手推车):货物运输用的推车 - Wheelchair(轮椅):行动辅助设备 标注格式: YOLO格式,包含物体边界框坐标和类别标签,专为目标检测任务优化设计。二、适用场景1. 智能安防监控系统: 识别机场、车站等交通枢纽的行李物品(背包/行李箱/手推车)和特殊设备(轮椅),实现异常滞留检测和安全预警。1. 智慧物流管理: 自动化识别物流场景中的货物载体(手推车/行李箱)和运输工具(自行车),优化仓储搬运流程。1. 无障碍设施管理: 检测轮椅使用者位置,联动电梯、通道等设施提供无障碍通行服务。1. 公共场所人流分析: 统计行人密度与移动轨迹,辅助商场、交通站点等场所的客流管理。三、数据集优势场景化物体全覆盖: 精准覆盖交通枢纽六大核心要素:个人物品(背包/行李箱)、运输工具(自行车/手推车)、特殊人群设备(轮椅)及行人,满足复杂场景检测需求。标注质量可靠: 所有标注均采用标准化YOLO格式,边界框定位精确,支持即插即用于YOLO系列等主流目标检测框架。任务适配性强: 数据集中物体具有显著尺度变化和遮挡场景(如堆叠行李、人群遮挡),有效提升模型在真实环境中的鲁棒性。垂直领域价值突出: 专注交通枢纽、物流仓储等场景的物体检测需求,为智慧机场、智能仓库等应用提供关键数据支撑。

上一篇: vue 引入第三方文件(高拍仪),传值及接口调用。
下一篇: vue封装全局过滤器(及常用方法封装)
攻城狮超超
博客等级 码龄5年 2484粉丝 18原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值