快捷導(dǎo)航

vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題)

更新時(shí)間：2024年04月15日 09:16:26 作者：AniDe_Bear

項(xiàng)目全線(xiàn)使用vue3的時(shí)候,自然使用的是配套更加契合的vite打包工具,于是自然而然會(huì)用到很多新的語(yǔ)法,本文給大家介紹了vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題),需要的朋友可以參考下

前言

項(xiàng)目全線(xiàn)使用vue3的時(shí)候，自然使用的是配套更加契合的vite打包工具，于是自然而然會(huì)用到很多新的語(yǔ)法，比如這兩年開(kāi)始普及的可選鏈語(yǔ)法，這個(gè)語(yǔ)法都已經(jīng)納入聲吶的代碼規(guī)范中了，但是vite自身打包的時(shí)候，并不會(huì)做過(guò)多的兼容處理。

默認(rèn)情況vite的兼容目標(biāo)是支持原生ES模塊，原生ESM動(dòng)態(tài)導(dǎo)入和import.meta的瀏覽器，官方預(yù)設(shè)的兼容目標(biāo)如下：

es2020
edge 88
firefox 78
chrome 87
safari 14

而我們的可選鏈正是es2020版本才有的，所以vite在打包后不會(huì)做任何兼容處理，這就導(dǎo)致了一些瀏覽器版本低一點(diǎn)的設(shè)備，打開(kāi)網(wǎng)站就會(huì)出現(xiàn)白屏的情況。

顯然這么新的版本在大部分的目標(biāo)用戶(hù)中，也是很超前的，所以做一些適當(dāng)?shù)募嫒萏幚磉€是有必要的。

教程

// vite.config.ts 
import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 

// https://vitejs.dev/config/ 
export default defineConfig({ 
    plugins: [vue()], 
    build: { target: "es2015" } 
})

通過(guò)指定打包后的目標(biāo)版本就行了，vite會(huì)將新的語(yǔ)法通過(guò)esbuild進(jìn)行轉(zhuǎn)換，此時(shí)我們?cè)?strong>支持esm的瀏覽器上訪(fǎng)問(wèn)時(shí)正常的。（注意只有打包后的代碼才會(huì)有效）

這里我特意大寫(xiě)了 支持ESM的瀏覽器是有用意的，我們看下打包后的index.html文件。

可以看到script標(biāo)簽上使用了type="module"屬性，顯然即便我們的腳本里面已經(jīng)兼容到了es2015，但是如果瀏覽器稍微低一點(diǎn)的版本的，它是支持es2015但是它不支持ESM模塊啊。

我們看一下對(duì)應(yīng)的支持統(tǒng)計(jì)：

es2015

es6版本最經(jīng)典的就是proxy的支持

ESM模塊

可以看到和es2015的支持度還是有一些差別的。

那么就進(jìn)入到第二個(gè)問(wèn)題，如何兼容不支持esm的瀏覽器！

兼容ESM瀏覽器

官方提供了一個(gè)插件：legacy

官方對(duì)它的定義是：為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持

其實(shí)就是對(duì)不支持esm的瀏覽器的支持，同時(shí)還有語(yǔ)法降級(jí)處理。

先進(jìn)行安裝：

pnpm i @vitejs/plugin-legacy@4.1.1 terser -D

需要注意的是vite4的legacy插件最高目前是4.1.1，再高的版本只支持vite5了，使用起來(lái)會(huì)報(bào)錯(cuò)。

legacy插件需要依賴(lài)terser對(duì)代碼進(jìn)行壓縮。

使用起來(lái)也很簡(jiǎn)單，我們直接引入插件并啟用即可：

// vite.config.ts 
import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import legacy from "@vitejs/plugin-legacy"; 

// https://vitejs.dev/config/ 
export default defineConfig({ 
    plugins: [ 
        vue(), 
        legacy() 
    ], 
    build: { 
        target: "es2015" 
    } 
})

官方定義，在沒(méi)有明確指定插件配置參數(shù)targets時(shí)，他會(huì)去讀取項(xiàng)目中的.browserslistrc文件，我們知道這個(gè)文件是一個(gè)用于配置支持的瀏覽器范圍的文件，通常會(huì)被Babel、Autoprefixer等插件使用。

我個(gè)人根據(jù)es2015的支持版本書(shū)寫(xiě)了一下內(nèi)容：

.browserslistrc

Chrome >= 51 
Edge >= 15 
Safari >= 10 
Firefox >= 54 
Opera >= 38 
iOS >= 10 
not ie <= 11 
Android >= 5 
not IE <= 11

然后我們?cè)偃ゴ虬?xiàng)目，可以發(fā)現(xiàn)index.html的腳本引入發(fā)生了變化。

可以看到script發(fā)生了變化，除了type="module"還有一個(gè)nomodule腳本，nomodule這個(gè)屬性表示在支持esm的瀏覽器不運(yùn)行里面的代碼，而不支持esm的瀏覽器又無(wú)法識(shí)別type="module"，反而會(huì)去運(yùn)行nomodule的script，從而實(shí)現(xiàn)了降級(jí)區(qū)分。

而降級(jí)的腳本都會(huì)攜帶一個(gè)legacy文本