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

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 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' ] })