解决H5、vue等项目在微信内置浏览器,微信端、ie某些浏览器打开白屏问题

问题描述:
微信公众号通过链接打开vue页面遇到白屏问题,通过排查,发现是某些微信浏览器版本过低导致,而此时项目中使用到了es6,es7等语法,导致浏览器无法解析
解决方法:
一、针对vue版本@3.x
直接在根目录下添加.babelrc文件即可
{
  "presets": [
    ["@vue/cli-plugin-babel/preset"]
  ],
  "plugins": []
}
二、针对vue版本@4.x
// 1.安装bebel进行es6转es5
npm install babel-preset-es2015
同时在根目录下添加.babelrc文件,配置如下
{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": []
}
此时可能会报错,如有报错还需安装
npm i @babel/preset-env -D
综上针对vue@3.x和vue@4.x都可用的.babelrc配置如下
{
  "presets": [
    ["@vue/cli-plugin-babel/preset"],
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": []
}

最后 重新启动项目即可
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
苹果微信浏览器打开Vue页面较慢,而PC打开较快可能是由于以下原因导致的。 首先,苹果微信浏览器作为移动的应用程序,在处理网页渲染和加载时受到设备性能和网络状况的影响。相比于PC浏览器,移动设备的处理能力和网络速度往往较低,导致加载速度变慢。 其次,Vue页面的加载速度也与页面的复杂程度和资源文件大小有关。如果Vue页面包含较多的组件和动态交互功能,以及大量的图像、样式和脚本文件,那么在加载和渲染过程中需要较长的时间,从而导致在移动浏览器上的打开速度变慢。 此外,苹果微信浏览器可能存在与Vue框架的兼容性问题,导致在加载和执行Vue代码时出现异常或延迟。这可能与苹果微信浏览器的内核版本和对特定前技术的支持程度有关。 为了解决这个问题,可以考虑以下措施: 1. 优化Vue页面的性能:减少组件数量和复杂度,优化代码逻辑和性能,压缩和合并资源文件等,以提升页面加载速度。 2. 使用异步加载:对于较大的资源文件,可以采用按需加载的方式,即在需要时再动态加载,减少首次加载时的等待时间。 3. 考虑使用其他移动浏览器:若苹果微信浏览器Vue页面的加载表现不佳,可以尝试其他移动浏览器,如Safari等,以获得更好的加载速度和体验。 4. 检查苹果微信浏览器版本:确保使用的苹果微信浏览器版本兼容Vue框架,并及时更新到最新版本,以避免由于旧版本的兼容性问题导致加载缓慢或异常。 总结而言,苹果微信浏览器打开Vue页面较慢与设备性能、网络状况、页面复杂度以及浏览器兼容性等因素有关。通过优化页面性能、异步加载、尝试其他浏览器以及更新应用版本等方法,可以改善页面加载速度和使用体验。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值