欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于Vite項目打包后瀏覽器兼容性問題的解決方案

 更新時間:2022年08月02日 11:31:50   作者:Memory_Space-2020  
本文主要介紹了關(guān)于Vite項目打包后瀏覽器兼容性問題的解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、問題描述

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

二、問題分析

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

三、解決方案

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

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

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

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

Plan B:先配置TypeScript轉(zhuǎn)換語法,然后再讓vite兼容目標。

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

Plan C:引入babel-polyfill環(huán)境墊片

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

首先我們先安裝babel-polyfill:

npm install --save babel-polyfill

然后在main.js里引入它:

import ‘babel-polyfill'

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

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

以上三個方案失敗后,我又重新回歸到vite這一塊,在vite官方文檔中我找到了vite自帶插件庫,并且在插件庫中找到了一個關(guān)于瀏覽器兼容支持的插件:@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'], ?// 需要兼容的目標列表,可以設(shè)置多個
? ? ? ? ? ? additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此插件
? ? ? ? })
? ? ]
})

打包、運行到瀏覽器。

新版本瀏覽器運行正常!舊版本瀏覽器運行正常!Plan D,yes!

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

打包后的變化:

  • 啟用插件后打包完成的目錄多出了一些帶有l(wèi)egacy字樣的文件,每個js腳本文件都有一個與其對應的遺留版本。
  • html文件中新增了一些腳本,這些腳本根據(jù)瀏覽器的支持程度來動態(tài)的引入正常版本文件還是帶有l(wèi)egacy字樣的遺留版本文件。
  • 此時當項目運行在一些版本較低的瀏覽器時,插件添加的腳本會自動加載legacy版本的文件。

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

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

后面就沒有什么思路了,后來想起來在vite.config.js配置中有一個關(guān)于樣式按需加載的插件:

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

到此這篇關(guān)于關(guān)于Vite項目打包后瀏覽器兼容性問題的解決方案的文章就介紹到這了,更多相關(guān)Vite打包瀏覽器兼容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)

    Vue 創(chuàng)建組件的兩種方法小結(jié)(必看)

    Vue 創(chuàng)建組件的方法有哪些呢?下面小編就為大家分享一篇Vue 創(chuàng)建組件的兩種方法小結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • 淺談Vue插槽實現(xiàn)原理

    淺談Vue插槽實現(xiàn)原理

    vue.js的靈魂是組件,而組件的靈魂是插槽。借助于插槽,我們能最大程度上實現(xiàn)組件復用。本文主要是對插槽的實現(xiàn)機制進行詳細概括總結(jié),在某些場景中,有一定的用處
    2021-06-06
  • Vue?仿QQ左滑刪除組件功能

    Vue?仿QQ左滑刪除組件功能

    前幾天朋友在做vue項目開發(fā)時,有人反映?IOS?上面的滑動點擊有點問題,讓我們來幫忙解決,于是我就重寫了代碼,下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺,需要的朋友參考下吧
    2018-03-03
  • Vue.js 十五分鐘入門圖文教程

    Vue.js 十五分鐘入門圖文教程

    不過 Vue 本身含有非常豐富的功能,要用 Vue 搭建完整的應用,仍然需要了解大量 Vue 設(shè)計概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下
    2018-09-09
  • Vuex中的Mutations的具體使用方法

    Vuex中的Mutations的具體使用方法

    這篇文章主要介紹了Vuex中的Mutations的具體使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • 詳解關(guān)于vue2.0工程發(fā)布上線操作步驟

    詳解關(guān)于vue2.0工程發(fā)布上線操作步驟

    這篇文章主要介紹了詳解關(guān)于vue2.0工程發(fā)布上線操作步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue2 中使用 render 函數(shù)編寫組件的方式

    vue2 中使用 render 函數(shù)編寫組件的方式

    vue提供了聲明式編寫UI的方式,即vue提供了對DOM進行描述的方式,有兩種描述DOM的方式即模板和render 函數(shù),本文通過示例代碼介紹vue2 中使用 render 函數(shù)編寫組件的方式,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)

    vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)

    這篇文章主要介紹了vue監(jiān)聽鍵盤事件的相關(guān)總結(jié),幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2021-01-01
  • Vue.js學習筆記之常用模板語法詳解

    Vue.js學習筆記之常用模板語法詳解

    本篇文章主要介紹了Vue.js學習筆記之常用模板語法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • Vue插槽具體用法及實例分析

    Vue插槽具體用法及實例分析

    本文主要介紹了Vue框架中插槽的使用方法和應用場景。通過具體實例分析,詳細講解了插槽的具體用法,幫助讀者深入理解Vue中插槽的使用和實現(xiàn)方式
    2023-05-05

最新評論