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

更新時間：2022年12月23日 08:28:23 作者：簡單卟容易

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

如何兼容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
    }),
  ],
}

打包運行，成功！