欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue對于低版本瀏覽器兼容問題的解決思路

 更新時間:2023年02月10日 14:30:09   作者:yi742891270  
很多時候使用vue開發(fā)的項目,由于無法在低版本瀏覽器上運行,所以需要解決下,下面這篇文章主要給大家介紹了關(guān)于vue對于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下

準備

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

工具庫

@vitejs/plugin-legacyds

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

進階使用

問題例子

雖然有些確實是兼容了低版本,但是,有些工具庫利用了些新的特性,頁面還是報錯。

比如下面這個在低版本手機的報錯,例子是我們這個框架中,去掉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都是支持的,但是我們目前不知道哪個有。

具體哪個使用了哪個庫不支持

然后又根據(jù)

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

可以確認,就是我們自己些的VanConfig組件有某個庫不被支持了

然后我們點進去,這個庫其實就只是應(yīng)用到了vueUse中的useDark。

我們查歷史可以得知,在安卓6左右,是沒有暗黑模式這個概念的。我們把這個useDark組件去掉,再打包。重新打開,我們就確實能夠在低版本手機中看到了

兼容語法

但是把某個庫或者某個功能去掉,肯定是下下策,最好還是能夠語法兼容。

查閱文檔,其中有2個專門將高級語法轉(zhuǎn)換的,是polyfills和modernPolyfills。根據(jù)文檔,我們可以得知,手動將高級語法轉(zhuǎn)換的方式是這樣

import legacy from '@vitejs/plugin-legacy'

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

但文檔寫得不是很好,沒有具體說明polyfills和modernPolyfills的關(guān)系,我還是建議2個都寫得一樣。
具體有哪些可以設(shè)置的值,就是這2個倉庫的值

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

根據(jù)報錯,是少了'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'
        ]
    })

總結(jié)

到此這篇關(guān)于vue對于低版本瀏覽器兼容問題的解決思路的文章就介紹到這了,更多相關(guān)vue低版本瀏覽器兼容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 在Vue3中實現(xiàn)拖拽文件上傳功能的過程詳解

    在Vue3中實現(xiàn)拖拽文件上傳功能的過程詳解

    文件上傳是我們在開發(fā)Web應(yīng)用時經(jīng)常遇到的功能之一,為了提升用戶體驗,我們可以利用HTML5的拖放API來實現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實現(xiàn)這一功能,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下
    2023-12-12
  • 詳解Vue3 Composition API中的提取和重用邏輯

    詳解Vue3 Composition API中的提取和重用邏輯

    這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue3插槽:el-table表頭插入tooltip及更換表格背景色方式

    vue3插槽:el-table表頭插入tooltip及更換表格背景色方式

    這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 默認瀏覽器設(shè)置及vue自動打開頁面的方法

    默認瀏覽器設(shè)置及vue自動打開頁面的方法

    今天小編就為大家分享一篇默認瀏覽器設(shè)置及vue自動打開頁面的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue動態(tài)代理無須重啟項目解決方案詳解

    vue動態(tài)代理無須重啟項目解決方案詳解

    這篇文章主要為大家介紹了vue動態(tài)代理無須重啟項目解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue實現(xiàn)滾動鼠標滾輪切換頁面

    vue實現(xiàn)滾動鼠標滾輪切換頁面

    這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動鼠標滾輪切換頁面,類似于縱向走馬燈,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • 簡單聊一聊vue中data的代理和監(jiān)聽

    簡單聊一聊vue中data的代理和監(jiān)聽

    這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2022-09-09
  • 使用iView Upload 組件實現(xiàn)手動上傳圖片的示例代碼

    使用iView Upload 組件實現(xiàn)手動上傳圖片的示例代碼

    這篇文章主要介紹了使用iView Upload 組件實現(xiàn)手動上傳圖片的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)

    vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)

    這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue路由回退的完美解決方案(vue-route-manager)

    Vue路由回退的完美解決方案(vue-route-manager)

    最近做了一個vue項目關(guān)于路由場景的問題,路由如何回退指定頁面,在此做個記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下
    2021-09-09

最新評論