vue對(duì)于低版本瀏覽器兼容問(wèn)題的解決思路
準(zhǔn)備
由于采用了vite3而不是vue-cli,所以以前的很多兼容方式都不能做。接下來(lái)就看一下vite是怎么做到低版本兼容的問(wèn)題。
工具庫(kù)
官方唯一指定的兼容工具庫(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' ] })
總結(jié)
到此這篇關(guān)于vue對(duì)于低版本瀏覽器兼容問(wèn)題的解決思路的文章就介紹到這了,更多相關(guān)vue低版本瀏覽器兼容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Vue3中實(shí)現(xiàn)拖拽文件上傳功能的過(guò)程詳解
文件上傳是我們?cè)陂_(kāi)發(fā)Web應(yīng)用時(shí)經(jīng)常遇到的功能之一,為了提升用戶(hù)體驗(yàn),我們可以利用HTML5的拖放API來(lái)實(shí)現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-12-12詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04vue3插槽:el-table表頭插入tooltip及更換表格背景色方式
這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06默認(rèn)瀏覽器設(shè)置及vue自動(dòng)打開(kāi)頁(yè)面的方法
今天小編就為大家分享一篇默認(rèn)瀏覽器設(shè)置及vue自動(dòng)打開(kāi)頁(yè)面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面,類(lèi)似于縱向走馬燈,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12簡(jiǎn)單聊一聊vue中data的代理和監(jiān)聽(tīng)
這篇文章主要給大家介紹了關(guān)于vue中data的代理和監(jiān)聽(tīng)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09使用iView Upload 組件實(shí)現(xiàn)手動(dòng)上傳圖片的示例代碼
這篇文章主要介紹了使用iView Upload 組件實(shí)現(xiàn)手動(dòng)上傳圖片的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10vue異步組件與組件懶加載問(wèn)題(import不能導(dǎo)入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問(wèn)題(import不能導(dǎo)入變量字符串路徑),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue路由回退的完美解決方案(vue-route-manager)
最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問(wèn)題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09