vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
vue3打包后在低版本瀏覽器或webview中出現(xiàn)白屏，原因就是因?yàn)檎Z法兼容問題。根據(jù)vite官方文檔描述，build.target默認(rèn)支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 傳送，所以需要我們手動(dòng)兼容低版本。
本篇以vite2、安卓7/ios11為例。
如何兼容ios11
兼容ios11只需要指定語法轉(zhuǎn)譯的最低版本即可解決。
// vite.config.js
build: {
target: ['ios11']
}如何兼容安卓7
target 里寫'android7'是沒有用的，所以我們要先知道當(dāng)前安卓版本的瀏覽器或webview的Chrome版本是多少，查看UA頭就行，安卓7的對(duì)應(yīng)版本是Chrome 64。
那是不是這么寫就完事了呢？
build: {
target: ['ios11', 'Chrome 64']
}一打包一運(yùn)行，發(fā)現(xiàn)依然白屏，這是怎么回事呢？來看看官方描述。
請(qǐng)注意，默認(rèn)情況下 Vite 只處理語法轉(zhuǎn)譯，且 默認(rèn)不包含任何 polyfill。 傳統(tǒng)瀏覽器可以通過插件 @vitejs/plugin-legacy 來支持，它將自動(dòng)生成傳統(tǒng)版本的 chunk 及與其相對(duì)應(yīng) ES 語言特性方面的 polyfill。兼容版的 chunk 只會(huì)在不支持原生 ESM 的瀏覽器中進(jìn)行按需加載。
意思就是Chrome 64版本不是現(xiàn)代瀏覽器，vite默認(rèn)不支持呀！需要我們引入polyfill。
如何使用@vitejs/plugin-legacy
默認(rèn)是不支持Chrome 64的，也是需要指定最低版本。
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
targets: ['Chrome 64'],
modernPolyfills: true
}),
],
}打包運(yùn)行，成功！
補(bǔ)充知識(shí)：vue打包項(xiàng)目以后白屏和圖片加載不出來問題解決方法
vue打包項(xiàng)目以后部署訪問白屏。查看控制臺(tái)是404.這是由于打包的時(shí)候沒有設(shè)置對(duì)靜態(tài)資源路徑。原文件是絕對(duì)路徑，需要改成相對(duì)路徑。
1.白屏修改config/index.js
2.圖片加載不出來，修改build/utils.js
總結(jié)
到此這篇關(guān)于vue3+vite兼容低版本的白屏問題的文章就介紹到這了,更多相關(guān)vue3+vite兼容低版本白屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers自定義軌跡動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue+element項(xiàng)目實(shí)時(shí)監(jiān)聽div寬度的變化
這篇文章主要介紹了vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽某個(gè)div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題
這篇文章主要介紹了解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼
本篇文章主要介紹了利用vueJs實(shí)現(xiàn)圖片輪播實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段
這篇文章主要介紹了vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
近期在用vue做一個(gè)環(huán)保類的項(xiàng)目,要求使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue接入高德地圖的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue filter 過濾器處理數(shù)據(jù)的作用,使用位置:mustache插值和v-bind表達(dá)式，過濾器用于文本轉(zhuǎn)換,復(fù)雜的數(shù)據(jù)處理則用computed，這篇文章主要介紹了Vue中的過濾器（filter）,需要的朋友可以參考下2022-11-11
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場(chǎng)景下,使用$attrs會(huì)更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
關(guān)于Vue 消除Token過期時(shí)刷新頁(yè)面的重復(fù)提示問題
很多朋友在token過期時(shí)刷新頁(yè)面，頁(yè)面長(zhǎng)時(shí)間未操作，再刷新頁(yè)面時(shí)，第一次彈出“token失效,請(qǐng)重新登錄!”提示，針對(duì)這個(gè)問題該怎么處理呢，下面小編給大家?guī)碓蚍治黾敖鉀Q方法，一起看看吧2021-07-07