vite+vue3項目解決低版本兼容性問題解決方案(Safari白屏)
vite+vue3項目解決低版本兼容性問題（Safari白屏）
使用官方插件 @vitejs/plugin-legacy 為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持。
1. 使用npm命令進行插件安裝
npm add -D @vitejs/plugin-legacy
2. 在 vite.config.js 配置文件中的 plugins 數(shù)組中引入它
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
})解決vite+vue3混合開發(fā)白屏問題
開發(fā)環(huán)境：vite4.0+vue3.2
使用場景：vite打包后將包嵌入app使用。
問題描述：打包后app顯示白屏。
解決方案：默認(rèn)的構(gòu)建目標(biāo)是能支持 原生 ESM 語法的 script 標(biāo)簽、原生 ESM 動態(tài)導(dǎo)入 和 import.meta 的瀏覽器。傳統(tǒng)瀏覽器可以通過官方插件 @vitejs/plugin-legacy 支持
1.安裝兼容插件 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy
2.在vite.config plugins中配置
legacy({
targets: ['defaults', 'not IE 11']
}),3.先執(zhí)行 npm run build 命令進行打包，打包完成后打開 dist/index.html。
將index.html中所有的<script></script> 標(biāo)簽中的 type="module"、crossorigin、nomodule 刪除。
ps:以上步驟做完如果還存在白屏可能是瀏覽器版本過低，可以在vite.config中設(shè)置legacy兼容低版本。
如
legacy({
targets: ['chrome 62'],
}),到此這篇關(guān)于vite+vue3項目解決低版本兼容性問題（Safari白屏）的文章就介紹到這了,更多相關(guān)vite vue3項目兼容低版本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目使用高德地圖的定位及關(guān)鍵字搜索功能的實例代碼(踩坑經(jīng)驗)
這篇文章主要介紹了vue項目使用高德地圖的定位及關(guān)鍵字搜索功能的實例代碼，也是小編踩了無數(shù)坑總結(jié)出來的經(jīng)驗,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
vue學(xué)習(xí)筆記五：在vue項目里面使用引入公共方法詳解
這篇文章主要介紹了在vue項目里面使用引入公共方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vant是一個專為移動端設(shè)計的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時需要注意版本兼容問題,Vue3項目應(yīng)安裝最新版Vant3,而Vue2項目則需安裝Vant2,安裝錯誤時,需卸載后重新安裝正確版本2024-10-10
父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法
這篇文章主要介紹了父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法,需要的朋友可以參考下2018-04-04
在Vue開發(fā)中遇到了搜索框輸入防抖處理,算是防抖的使用場景之一吧,這篇文章主要給大家介紹了關(guān)于Vue3指令之搜索框輸入防抖功能實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-12-12
本文主要介紹了vue3實現(xiàn)問卷調(diào)查的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue.js實現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實現(xiàn)表格動態(tài)增加刪除的方法實例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對比時辨識VNodes。這篇文章主要給大家介紹Vue中key的作用，感興趣的朋友跟隨小編一起看看吧2020-06-06
這篇文章主要為大家詳細介紹了vue+element實現(xiàn)圖片上傳及裁剪功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06