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

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

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

前言

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

默認情況vite的兼容目標是支持原生ES模塊，原生ESM動態(tài)導入和import.meta的瀏覽器，官方預設的兼容目標如下：

es2020
edge 88
firefox 78
chrome 87
safari 14

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

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

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

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

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

我們看一下對應的支持統(tǒng)計：

es2015

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

ESM模塊

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

那么就進入到第二個問題，如何兼容不支持esm的瀏覽器！

兼容ESM瀏覽器

官方提供了一個插件：legacy

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

其實就是對不支持esm的瀏覽器的支持，同時還有語法降級處理。

先進行安裝：

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

需要注意的是vite4的legacy插件最高目前是4.1.1，再高的版本只支持vite5了，使用起來會報錯。

legacy插件需要依賴terser對代碼進行壓縮。

使用起來也很簡單，我們直接引入插件并啟用即可：

// 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時，他會去讀取項目中的.browserslistrc文件，我們知道這個文件是一個用于配置支持的瀏覽器范圍的文件，通常會被Babel、Autoprefixer等插件使用。

我個人根據(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

然后我們再去打包項目，可以發(fā)現(xiàn)index.html的腳本引入發(fā)生了變化。

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

而降級的腳本都會攜帶一個legacy文本