快捷導(dǎo)航

vue3+vite兼容低版本的白屏問(wèn)題詳解(安卓7/ios11)

更新時(shí)間：2022年12月23日 08:28:23 作者：簡(jiǎn)單卟容易

這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問(wèn)題的相關(guān)資料,還給大家介紹了vue打包項(xiàng)目以后白屏和圖片加載不出來(lái)問(wèn)題的解決方法,需要的朋友可以參考下

vue3打包后在低版本瀏覽器或webview中出現(xiàn)白屏，原因就是因?yàn)檎Z(yǔ)法兼容問(wèn)題。根據(jù)vite官方文檔描述，build.target默認(rèn)支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 傳送，所以需要我們手動(dòng)兼容低版本。

本篇以vite2、安卓7/ios11為例。

如何兼容ios11

兼容ios11只需要指定語(yǔ)法轉(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)依然白屏，這是怎么回事呢？來(lái)看看官方描述。

請(qǐng)注意，默認(rèn)情況下 Vite 只處理語(yǔ)法轉(zhuǎn)譯，且 默認(rèn)不包含任何 polyfill。傳統(tǒng)瀏覽器可以通過(guò)插件 @vitejs/plugin-legacy 來(lái)支持，它將自動(dòng)生成傳統(tǒng)版本的 chunk 及與其相對(duì)應(yīng) ES 語(yǔ)言特性方面的 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)行，成功！