vue对于低版本浏览器兼容问题的解决思路

更新时间：2023年02月10日 14:30:09 作者：yi742891270

很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下

准备

由于采用了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 function

我们就可以从中推断出，肯定是某个库，用了高级语法，然后低版本没兼容。因为在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'
        ]
    })

总结

到此这篇关于vue对于低版本浏览器兼容问题的解决思路的文章就介绍到这了,更多相关vue低版本浏览器兼容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Vue3中实现拖拽文件上传功能的过程详解
文件上传是我们在开发Web应用时经常遇到的功能之一,为了提升用户体验,我们可以利用HTML5的拖放API来实现拖拽文件上传的功能,本文将介绍如何在Vue3中实现这一功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
2023-12-12
详解Vue3 Composition API中的提取和重用逻辑
这篇文章主要介绍了Vue3 Composition API中的提取和重用逻辑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue3插槽:el-table表头插入tooltip及更换表格背景色方式
这篇文章主要介绍了vue3插槽:el-table表头插入tooltip及更换表格背景色方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
默认浏览器设置及vue自动打开页面的方法
今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue动态代理无须重启项目解决方案详解
这篇文章主要为大家介绍了vue动态代理无须重启项目解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue实现滚动鼠标滚轮切换页面
这篇文章主要为大家详细介绍了vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
简单聊一聊vue中data的代理和监听
这篇文章主要给大家介绍了关于vue中data的代理和监听的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2022-09-09
使用iView Upload 组件实现手动上传图片的示例代码
这篇文章主要介绍了使用iView Upload 组件实现手动上传图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
这篇文章主要介绍了vue异步组件与组件懒加载问题(import不能导入变量字符串路径)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue路由回退的完美解决方案（vue-route-manager）
最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下
2021-09-09