Vite項目打包后瀏覽器兼容性問題如何解決

這篇“Vite項目打包后瀏覽器兼容性問題如何解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vite項目打包后瀏覽器兼容性問題如何解決”文章吧。

一、問題描述

vite+vue3項目開發完以后，你會發現打包后的項目運行在新版瀏覽器可以正常顯示，但運行在一些版本比較老的瀏覽器如 Chrome < 23、Firefox < 21和IE等瀏覽器上時顯示一片空白，并且沒有任何的錯誤提示。

二、問題分析

此時你的大腦可能跟頁面一樣也是一片空白，但是不要慌，我們先分析一下產生這個問題的可能的原因：那些版本較低的瀏覽器不支持ES6的語法和新API，而Babel默認只轉換新的JavaScript句法，不轉換新的API，比如Proxy、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法都不會轉碼。

三、解決方案

Plan A：在vite.config.js中配置瀏覽器的兼容性。

我們項目是用vite搭建的，因此我首先想到了使用vite自帶的API去配置瀏覽器兼容性。
配置build.target和buid.cssTarget

  build: {
      target: ['chrome52'],
      cssTarget: ["chrome52"],
      }

打包并運行到瀏覽器后發現還是一片空白，查看打包生成的文件，發現里面依然有const、Promise等新語法和API，并沒有為我們轉換。Plan A ,No.

Plan B：先配置TypeScript轉換語法，然后再讓vite兼容目標。

在tsconfig.json文件內配置target為”es5”，然后開始打包。
打包時報錯：error: Transforming const to the configured target environment (“es5”) is not supported yet
錯誤信息大抵在告訴我們：代碼中有const等目標環境不支持的語法，并且它目前還不支持將const轉換為目標環境"es5"。嗯這就有點意思了。Plan B, NO.

Plan C：引入babel-polyfill環境墊片

上面轉換語法的方案失敗后，我嘗試給瀏覽器環境請一個外援：babel-polyfill，讓它來做那些低版本瀏覽器環境做不到的事情。
什么是polyfill？官方的解釋是：“用于實現瀏覽器不支持原生功能的代碼”，我們可以簡單理解為polyfill可以在當前運行環境中模擬出那些當前環境不支持的API，它為我們的當前環境提供了一個墊片，我們可以在這個墊片上使用新API。

首先我們先安裝babel-polyfill：

npm install --save babel-polyfill

然后在main.js里引入它：

import ‘babel-polyfill'

然后我們重新打包、啟動、運行到瀏覽器，有些伙伴到這一步可能就成功了，但我的仍然是一片空白！
慌不慌？你說慌不慌，慌！我也覺得慌，為什么？網上那么多人用這個方法成功了，但我們失敗了，這能不慌？ Plan C，No！

Plan D：使用@vitejs/plugin-legacy插件

以上三個方案失敗后，我又重新回歸到vite這一塊，在vite官方文檔中我找到了vite自帶插件庫，并且在插件庫中找到了一個關于瀏覽器兼容支持的插件：@vitejs/plugin-legacy
首先安裝插件：npm i @vitejs/plugin-legacy -D

然后在vite.config.js中配置

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
    plugins: [
        legacyPlugin({
            targets:['chrome 52'],  // 需要兼容的目標列表，可以設置多個
            additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此插件
        })
    ]
})

打包、運行到瀏覽器。

新版本瀏覽器運行正常！舊版本瀏覽器運行正常！Plan D，yes！

以下是@vitejs/plugin-legacy插件的簡單介紹：
插件默認行為：
1.使用@babel/preset-env轉換，為包中的每個塊生成相應的遺留塊。
2.生成一個包含 SystemJS 運行時的 polyfill 塊。
3.使用

打包后的變化：

• 啟用插件后打包完成的目錄多出了一些帶有legacy字樣的文件，每個js腳本文件都有一個與其對應的遺留版本。

• html文件中新增了一些腳本，這些腳本根據瀏覽器的支持程度來動態的引入正常版本文件還是帶有legacy字樣的遺留版本文件。

• 此時當項目運行在一些版本較低的瀏覽器時，插件添加的腳本會自動加載legacy版本的文件。

四、過程中遇到的其他問題

在Plan D成功在低版本瀏覽器運行以后，發現有一些CSS樣式顯示不正常，隨后確認是重寫Vant的CSS變量沒有生效。
剛開始認為是CSS在打包時沒有做好兼容處理，然后就折騰了一番CSS的兼容支持。css解釋器、postcss插件和vite配置css目標環境都沒用。

后面就沒有什么思路了，后來想起來在vite.config.js配置中有一個關于樣式按需加載的插件：

此時就想是不是這個插件影響到了我的CSS的正常效果，當我把它移除并重新打包運行后，樣式就回歸正常了，看來確實是被它影響的。
使用這個按需加載的插件后，當頁面加載時，它會根據它的一些規則去判斷當前需要加載哪些樣式文件，哪些不需要加載。在加載這些樣式文件時，如果樣式文件里有我們自定義全局樣式重名的，那么根據css規則，我們自定義過的全局樣式會被覆蓋掉。
在本次的案例中，我們重寫了Vant組件的部分變量，并全局引入了。在打開包含這些變量的頁面時，按需加載插件此時才會加載Vant的樣式文件，我們在全局重寫的變量又被重寫了，因此重寫的全局變量沒有生效。

以上就是關于“Vite項目打包后瀏覽器兼容性問題如何解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。