位置: IT常识 - 正文

vue对于低版本浏览器兼容问题(vue浏览器版本)

编辑:rootadmin
vue对于低版本浏览器兼容问题 准备

推荐整理分享vue对于低版本浏览器兼容问题(vue浏览器版本),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue兼容低版本浏览器,vue最低兼容,vue低版本浏览器下载没有csv文件后缀,vue兼容低版本浏览器,vue兼容支持的ie浏览器的最低版本,vue低版本浏览器限制,vue低版本浏览器限制,vue低版本浏览器下载没有csv文件后缀,内容如对您有帮助,希望把文章链接给更多的朋友!

由于采用了vite3而不是vue-cli,所以以前的很多兼容方式都不能做。接下来就看一下vite是怎么做到低版本兼容的问题。

工具库

@vitejs/plugin-legacyds 官方唯一指定的兼容工具库,使用方式官网都有了

进阶使用问题例子

虽然有些确实是兼容了低版本,但是,有些工具库利用了些新的特性,页面还是报错。

比如下面这个在低版本手机的报错,例子是我们这个框架中,去掉modernPolyfills:['es.array.flat-map','es.object.values'],的兼容性:

[Vue warn]: Unhandled error during execution of watcher callback at <VanConfig> at <App>[Vue warn]: Unhandled error during execution of setup function at <VanConfig> at <App>Uncaught TypeError: Object.values(...).flatMap is not a function\n\t/viteTest/assets/index.44986ed0.js:46:12228\nTypeError: Object.values(...).flatMap is not a function at getSSRHandler (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12228) at A (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12422) at Object.onChanged (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:13520) at x (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12476) at callWithErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1576) at callWithAsyncErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1698) at I (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17067) at doWatch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17371) at watch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:15741) at useColorMode (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12503)[Vue warn]: Unhandled error during execution of watcher callback at <VanConfig> at <App>[Vue warn]: Unhandled error during execution of setup function at <VanConfig> at <App>[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core at <VanConfig> at <App>[Vue Router warn]: uncaught error during route navigation:{}Uncaught (in promise) {"name": "TypeError", "message": "Object.values(...).flatMap is not a function", "stack": "TypeError: Object.values(...).flatMap is not a function\n at getSSRHandler (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12228)\n at A (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12422)\n at Object.onChanged (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:13520)\n at x (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12476)\n at callWithErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1576)\n at callWithAsyncErrorHandling (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:1698)\n at I (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17067)\n at doWatch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:17371)\n at watch (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:4:15741)\n at useColorMode (https://test.dongguantong.com.cn/viteTest/assets/index.44986ed0.js:46:12503)"}Unhandled promise rejection {}解决思路语法不支持Object.values(...).flatMap is not a functionvue对于低版本浏览器兼容问题(vue浏览器版本)

我们就可以从中推断出,肯定是某个库,用了高级语法,然后低版本没兼容。因为在es6以上flatMap、Object.values都是支持的,但是我们目前不知道哪个有。

具体哪个使用了哪个库不支持

然后又根据

[Vue warn]: Unhandled error during execution of watcher callback at <VanConfig> at <App>

可以确认,就是我们自己些的VanConfig组件有某个库不被支持了

然后我们点进去,这个库其实就只是应用到了vueUse中的useDark。

我们查历史可以得知,在安卓6左右,是没有暗黑模式这个概念的。我们把这个useDark组件去掉,再打包。重新打开,我们就确实能够在低版本手机中看到了

兼容语法

但是把某个库或者某个功能去掉,肯定是下下策,最好还是能够语法兼容。

查阅文档,其中有2个专门将高级语法转换的,是polyfills和modernPolyfills。根据文档,我们可以得知,手动将高级语法转换的方式是这样

import legacy from '@vitejs/plugin-legacy'export default { plugins: [ legacy({ polyfills: ['es.promise.finally', 'es/map', 'es/set'], modernPolyfills: ['es.promise.finally'] }) ]}

但文档写得不是很好,没有具体说明polyfills和modernPolyfills的关系,我还是建议2个都写得一样。 具体有哪些可以设置的值,就是这2个仓库的值

https://unpkg.com/browse/core-js@3.26.0/https://github.com/zloirock/core-js/tree/master/packages/core-js

根据报错,是少了'es.array.flat-map'和'es.object.values',加上去

legacy({ //babel,兼容老浏览器,但是体积会大80% // targets: ['defaults', 'not IE 11'] targets: ['chrome 52'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'], renderLegacyChunks: true, modernPolyfills:[ 'es.array.flat-map', 'es.object.values' ], polyfills: [ 'es.object.values', 'es.array.flat-map' ] })
本文链接地址:https://www.jiuchutong.com/zhishi/283314.html 转载请保留说明!

上一篇:文竹发黄怎么挽救(图文)(文竹发黄怎么挽救?)

下一篇:netddeclnt.exe - netddeclnt是什么进程 有什么用

  • 飞科电动理发器怎么拆刀头部(飞科电动理发器使用教程)

    飞科电动理发器怎么拆刀头部(飞科电动理发器使用教程)

  • 华为nova7pro如何设置应用锁(华为nova7pro如何恢复出厂设置)

    华为nova7pro如何设置应用锁(华为nova7pro如何恢复出厂设置)

  • vivos6卡槽如何打开(vivos6电话卡槽)

    vivos6卡槽如何打开(vivos6电话卡槽)

  • alert有什么用途(alert?)

    alert有什么用途(alert?)

  • 在安装windows的驱动器上需要更多的可用空间(在安装windows的驱动器上)

    在安装windows的驱动器上需要更多的可用空间(在安装windows的驱动器上)

  • word怎么退出全屏显示(word怎么退出全部重排窗口)

    word怎么退出全屏显示(word怎么退出全部重排窗口)

  • 该账号已被禁封 是什么意思(账号已被禁封图片)

    该账号已被禁封 是什么意思(账号已被禁封图片)

  • 微信怎么设置禁止评论(微信怎么设置禁止加好友)

    微信怎么设置禁止评论(微信怎么设置禁止加好友)

  • 电磁式电器的工作原理(电磁式电器工作特点有哪些)

    电磁式电器的工作原理(电磁式电器工作特点有哪些)

  • oppor9s怎么升级安卓系统7.0(oppor9s怎么升级到cloros5.2.1)

    oppor9s怎么升级安卓系统7.0(oppor9s怎么升级到cloros5.2.1)

  • ps的文字怎样加边框(ps文字怎样加渐变)

    ps的文字怎样加边框(ps文字怎样加渐变)

  • 华为哪个手机是type-c(华为哪个手机是麒麟990)

    华为哪个手机是type-c(华为哪个手机是麒麟990)

  • 哪种视图方式不能编辑文档(哪种视图方式不显示图片)

    哪种视图方式不能编辑文档(哪种视图方式不显示图片)

  • word怎么竖排版(word文档怎样竖向排版)

    word怎么竖排版(word文档怎样竖向排版)

  • 手机贴吧怎么加好友(手机贴吧怎么加人)

    手机贴吧怎么加好友(手机贴吧怎么加人)

  • vivo逆光拍照什么意思(vivox60逆光拍照)

    vivo逆光拍照什么意思(vivox60逆光拍照)

  • 爱奇艺怎样发颜色弹幕(爱奇艺会员怎么发彩色弹幕)

    爱奇艺怎样发颜色弹幕(爱奇艺会员怎么发彩色弹幕)

  • 华为matex上市时间

    华为matex上市时间

  • 华为p30pro能放内存卡吗(华为p30pro能不能放内存卡)

    华为p30pro能放内存卡吗(华为p30pro能不能放内存卡)

  • 怎么设置微信投票次数(微信投屏怎么设置方法)

    怎么设置微信投票次数(微信投屏怎么设置方法)

  • iphone7授权管理在哪里(苹果授权管理打开和关闭是什么样的)

    iphone7授权管理在哪里(苹果授权管理打开和关闭是什么样的)

  • 华为p30pro限量套装是什么(huaweip30pro限量套装)

    华为p30pro限量套装是什么(huaweip30pro限量套装)

  • 华为mate20左上角hd什么意思(华为mate20左上角和右上角怎么互换)

    华为mate20左上角hd什么意思(华为mate20左上角和右上角怎么互换)

  • 苹果x接电话没声音(苹果x接电话没网络怎么回事)

    苹果x接电话没声音(苹果x接电话没网络怎么回事)

  • 微信小程序 | 小程序系统API调用(微信小程序小小驯龙师破解版)

    微信小程序 | 小程序系统API调用(微信小程序小小驯龙师破解版)

  • 电脑学习网2022年最新网易云音乐代挂刷分源码-每天300首-电脑学习网(学电脑的网站)

    电脑学习网2022年最新网易云音乐代挂刷分源码-每天300首-电脑学习网(学电脑的网站)

  • 什么是企业增值税和所得税
  • 残疾人保障金的工资按实发还是应发
  • 缴纳的增值税比账面的少怎么做账
  • 经营所得与劳务所得的税率
  • 减免所得税额是怎么算出来的2022
  • 成本还原有什么作用
  • 自然人独资企业交哪些税
  • 安置残疾人就业税收优惠政策
  • 出售房屋缴纳的印花税
  • 国外客户手续费差异账务处理如何做?
  • 非股东入资款会计分录怎么写?
  • 行政事业单位培训伙食补助报销规定
  • 小规模企业营业税
  • 不付供应商尾款了怎么清账
  • 小规模季度超过30万是全额纳税吗
  • 外单位人员能在单位借款吗
  • 商业汇票记什么会计科目?
  • 公司承担的个人所得税怎么做分录
  • 经营现金流量为负数是什么意思
  • 生产企业出口退税全部流程
  • 劳务报酬怎么申报个税电子税务
  • 职工教育经费是工资总额的多少
  • 应付职工薪酬账户结构
  • cpu主频在哪看
  • vue引入echarts柱状图
  • php如何重启
  • 贷款滞纳金如何收取
  • 其他应收个人贷方余额表示什么意思
  • 阿尔卑斯旱獭冬眠
  • 谷歌浏览器如何设置主页为默认页
  • 除湿器属于固定资产什么类别
  • 帮人开票怎么计算税点金额
  • php运用
  • 3d检测软件
  • 增值税专票怎么作废
  • 红字专用发票是红色的吗
  • php预处理查询
  • vue组件元素设置滚动条高度
  • php如何实现多进程
  • linux mput命令
  • 计提本月银行存款应收利息会计分录
  • 未分配利润为负数严重吗
  • 含税采购金额怎么算
  • 公司收购股权交什么税
  • 个税汇算要清缴么
  • 固定资产入账及计提折旧
  • 单位人民币卡账户的资金一律从其基本存款账户转账存入
  • 如果不签合同会怎么样
  • 进口关税的会计处理方法
  • 购货方收到销售方提供的发票怎么做分录
  • 应收票据和应付票据可以对冲吗
  • 医院财务核算制度
  • 政府机关有纳税人吗
  • 残保金怎么办理
  • Sql Server datetime问题
  • innodb_flush_method取值方法(实例讲解)
  • 电脑bios找不到硬盘怎么办
  • 注册表修改大全
  • 如何配置samba配置文件
  • xp系统exiting pxe rom
  • xp输入法图标不显示图片
  • windows 8升级
  • win8怎么启动资源管理器
  • 电脑老是弹出提示
  • 在Linux上优化Mysql运行环境让你对Mysql更多了解
  • w7开机界面
  • linux rpm包怎么安装
  • linux防火墙开启80端口视频
  • python读取文件指定内容
  • vue组件用法
  • jquery并列选择器
  • jquery页面
  • 简单谈谈你对中国国防建设的认识
  • js实现类
  • jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
  • 叉车需要手续吗
  • 发票专用章和公章编码一样吗
  • 网上缴费后如何复电
  • 地税怎么收费标准
  • 个体经营所得申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设