快捷導(dǎo)航

vue對(duì)于低版本瀏覽器兼容問(wèn)題的解決思路

更新時(shí)間：2023年02月10日 14:30:09 作者：yi742891270

很多時(shí)候使用vue開(kāi)發(fā)的項(xiàng)目,由于無(wú)法在低版本瀏覽器上運(yùn)行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對(duì)于低版本瀏覽器兼容問(wèn)題的解決思路,需要的朋友可以參考下

準(zhǔn)備

由于采用了vite3而不是vue-cli，所以以前的很多兼容方式都不能做。接下來(lái)就看一下vite是怎么做到低版本兼容的問(wèn)題。

工具庫(kù)

@vitejs/plugin-legacyds

官方唯一指定的兼容工具庫(kù)，使用方式官網(wǎng)都有了

進(jìn)階使用

問(wèn)題例子

雖然有些確實(shí)是兼容了低版本，但是，有些工具庫(kù)利用了些新的特性，頁(yè)面還是報(bào)錯(cuò)。

比如下面這個(gè)在低版本手機(jī)的報(bào)錯(cuò)，例子是我們這個(gè)框架中，去掉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 {}

解決思路

語(yǔ)法不支持

Object.values(...).flatMap is not a function

我們就可以從中推斷出，肯定是某個(gè)庫(kù)，用了高級(jí)語(yǔ)法，然后低版本沒(méi)兼容。因?yàn)樵趀s6以上flatMap、Object.values都是支持的，但是我們目前不知道哪個(gè)有。

具體哪個(gè)使用了哪個(gè)庫(kù)不支持

然后又根據(jù)

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

可以確認(rèn)，就是我們自己些的VanConfig組件有某個(gè)庫(kù)不被支持了

然后我們點(diǎn)進(jìn)去，這個(gè)庫(kù)其實(shí)就只是應(yīng)用到了vueUse中的useDark。

我們查歷史可以得知，在安卓6左右，是沒(méi)有暗黑模式這個(gè)概念的。我們把這個(gè)useDark組件去掉，再打包。重新打開(kāi)，我們就確實(shí)能夠在低版本手機(jī)中看到了

兼容語(yǔ)法

但是把某個(gè)庫(kù)或者某個(gè)功能去掉，肯定是下下策，最好還是能夠語(yǔ)法兼容。

查閱文檔，其中有2個(gè)專(zhuān)門(mén)將高級(jí)語(yǔ)法轉(zhuǎn)換的，是polyfills和modernPolyfills。根據(jù)文檔，我們可以得知，手動(dòng)將高級(jí)語(yǔ)法轉(zhuǎn)換的方式是這樣

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      polyfills: ['es.promise.finally', 'es/map', 'es/set'],
      modernPolyfills: ['es.promise.finally']
    })
  ]
}

但文檔寫(xiě)得不是很好，沒(méi)有具體說(shuō)明polyfills和modernPolyfills的關(guān)系，我還是建議2個(gè)都寫(xiě)得一樣。
具體有哪些可以設(shè)置的值，就是這2個(gè)倉(cāng)庫(kù)的值

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

根據(jù)報(bào)錯(cuò)，是少了'es.array.flat-map'和'es.object.values'，加上去

legacy({ //babel，兼容老瀏覽器，但是體積會(huì)大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'
        ]
    })