關(guān)于vue3+vite兼容低版本的白屏問(wèn)題的相關(guā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)行命斧，成功！
