使用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兼容老版本瀏覽器，解決瀏覽器無(wú)報(bào)錯(cuò)但打開(kāi)空白
最近一個(gè)醫(yī)院的項(xiàng)目，遇到有些電腦能訪問(wèn)web頁(yè)面，有些電腦無(wú)法訪問(wèn)。
最后發(fā)現(xiàn)是瀏覽器版本不一樣，老的瀏覽器版本不能正常訪問(wèn)，而新的瀏覽器可以訪問(wèn)。
因?yàn)獒t(yī)院是內(nèi)網(wǎng)環(huán)境，電腦數(shù)量又比較多，所以沒(méi)辦法一一去升級(jí)瀏覽器版本。
找了一些資料后得知可以使用@vitejs/plugin-legacy來(lái)兼容老版本的瀏覽器。
該插件可以為你的Vite項(xiàng)目生成適用于老版本瀏覽器的傳統(tǒng)的基于ES5的構(gòu)建包。
在你的Vite項(xiàng)目中運(yùn)行以下命令來(lái)安裝@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)文章
vue3?Table分頁(yè)保留選中狀態(tài)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁(yè)保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁(yè)和選中功能,需要的朋友可以參考下2023-08-08
vue3學(xué)習(xí)筆記簡(jiǎn)單封裝axios示例實(shí)現(xiàn)
這篇文章主要為大家介紹了vue3學(xué)習(xí)筆記簡(jiǎn)單封裝axios示例實(shí)現(xiàn)，2022-06-06
element?ui?From表單校驗(yàn)不生效問(wèn)題解決
表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作，表單校驗(yàn)可以提醒用戶填寫(xiě)數(shù)據(jù)規(guī)則以確保用戶提交數(shù)據(jù)的有效性，本文主要介紹了element?ui?From表單校驗(yàn)不生效問(wèn)題解決，具有一定的參考價(jià)值，感興趣的可以了解一下2024-01-01
vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue如何實(shí)現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項(xiàng)目中,使用ElementUI的el-upload組件可以輕松實(shí)現(xiàn)文件上傳功能,通過(guò)配置組件參數(shù)和實(shí)現(xiàn)相應(yīng)的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue-cli隨機(jī)生成port源碼的方法，文中給大家介紹了vue 隨機(jī)色生成方法,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue+js實(shí)現(xiàn)微信上傳圖片選擇功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue條件渲染之v-if、v-else-if、v-else的完整指南
v-if和v-else是Vue.js中的控制指令,用于條件性地渲染一塊內(nèi)容,這些內(nèi)容只會(huì)在指令表達(dá)式返回真值時(shí)才會(huì)渲染,這篇文章主要介紹了Vue條件渲染之v-if、v-else-if、v-else的完整指南,需要的朋友可以參考下2026-03-03
本文內(nèi)容主要參考官方教程，為了方便理解，用更加通俗的文字講解Vuex，也原文內(nèi)容做一些重點(diǎn)引用。希望會(huì)對(duì)你有所幫助。2017-07-07
vue之Vue.use的使用場(chǎng)景及說(shuō)明
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12