前言

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

默認(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è)備，打開網(wǎng)站就會(huì)出現(xiàn)白屏的情況。

顯然這么新的版本在大部分的目標(biāo)用戶中，也是很超前的，所以做一些適當(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" } 
})

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

這里我特意大寫了 支持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è)問題，如何兼容不支持esm的瀏覽器！

兼容ESM瀏覽器

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

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

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

先進(jìn)行安裝：

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

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

legacy插件需要依賴terser對(duì)代碼進(jì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" 
    } 
})

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

我個(gè)人根據(jù)es2015的支持版本書寫了一下內(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的瀏覽器又無法識(shí)別type="module"，反而會(huì)去運(yùn)行nomodule的script，從而實(shí)現(xiàn)了降級(jí)區(qū)分。

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

這個(gè)就是用于兼容不支持esm模塊的瀏覽器降級(jí)方案。

這個(gè)方式的好處在較新的瀏覽器中可以使用新的特性，舊的瀏覽器使用legacy降級(jí)腳本，從而避免了以前打包時(shí)一刀切的兼容方式，所有的代碼全部降級(jí)處理，使得一些新設(shè)備沒法體現(xiàn)出新語法的性能。

以上就是vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問題)的詳細(xì)內(nèi)容，更多關(guān)于vue3+vite低版本瀏覽器兼容的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論