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