使用vite兼容低端瀏覽器配置
vite兼容低端瀏覽器配置
@vitejs/plugin-legacy
官方提供的插件，兼容低端瀏覽器
npm i @vitejs/plugin-legacy
vite.config.js
import legacy from "@vitejs/plugin-legacy";
plugins: [
legacy({
targets: ["Chrome 64"],
modernPolyfills: true,
}),
],
vite兼容老版本瀏覽器，解決瀏覽器無報(bào)錯(cuò)但打開空白
最近一個(gè)醫(yī)院的項(xiàng)目，遇到有些電腦能訪問web頁面，有些電腦無法訪問。
最后發(fā)現(xiàn)是瀏覽器版本不一樣，老的瀏覽器版本不能正常訪問，而新的瀏覽器可以訪問。
因?yàn)獒t(yī)院是內(nèi)網(wǎng)環(huán)境，電腦數(shù)量又比較多，所以沒辦法一一去升級(jí)瀏覽器版本。
找了一些資料后得知可以使用@vitejs/plugin-legacy來兼容老版本的瀏覽器。
該插件可以為你的Vite項(xiàng)目生成適用于老版本瀏覽器的傳統(tǒng)的基于ES5的構(gòu)建包。
在你的Vite項(xiàng)目中運(yùn)行以下命令來安裝@vitejs/plugin-legacy：
npm install --save-dev @vitejs/plugin-legacy
還需要安裝一個(gè)依賴 npm iterser -D ，如果不安裝的話可能打包時(shí)會(huì)出錯(cuò)
在Vite的配置文件（vite.config.js）中引入并注冊(cè)@vitejs/plugin-legacy插件：
export default defineConfig({
// 其他配置項(xiàng)...
plugins: [
// 注冊(cè) legacy 插件
legacy({
targets: ['ie >= 11', 'chrome <= 60'], // 需要兼容的目標(biāo)列表，可以設(shè)置多個(gè)
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
renderLegacyChunks: true,
polyfills: [
'es.symbol',
'es.array.filter',
'es.promise',
'es.promise.finally',
'es/map',
'es/set',
'es.array.for-each',
'es.object.define-properties',
'es.object.define-property',
'es.object.get-own-property-descriptor',
'es.object.get-own-property-descriptors',
'es.object.keys',
'es.object.to-string',
'web.dom-collections.for-each',
'esnext.global-this',
'esnext.string.match-all'
]
}),
]
});總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解
在做項(xiàng)目的時(shí)候遇到一個(gè)問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內(nèi)容和圖片,這篇文章主要給大家介紹了關(guān)于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的相關(guān)資料,需要的朋友可以參考下2022-04-04
指令是Vue模板中最常用的一項(xiàng)功能，它帶有前綴v-，主要職責(zé)是當(dāng)其表達(dá)式的值改變時(shí)，相應(yīng)的將某些行為應(yīng)用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue綁定設(shè)置屬性的多種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue 項(xiàng)目中的this.$get,this.$post等$的用法案例詳解
vue.js的插件應(yīng)該暴露一個(gè)install方法。這個(gè)方法的第一個(gè)參數(shù)是vue構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象，首頁要安裝axios，本文結(jié)合案例代碼給大家詳細(xì)講解vue 中的this.$get,this.$post等$的用法，一起學(xué)習(xí)下吧2022-12-12
options是new Vue的參數(shù),我們一般稱之為選項(xiàng)或者構(gòu)造選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue中options選項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue和react中關(guān)于插槽詳解，slot插槽是Vue對(duì)組件嵌套這種擴(kuò)展機(jī)制的稱謂，在react可以也這樣稱呼，但是并不很常見。不過叫slot確實(shí)很形象2022-08-08
解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問題
這篇文章主要介紹了解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點(diǎn)調(diào)試Vue的方法以及心得分享，需要的朋友參考學(xué)習(xí)下。2018-02-02
vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08