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 functionnt/viteTest/assets/index.44986ed0.js:46:12228nTypeError: 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 functionn    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'
        ]
    })