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顯示白屏。
解決方案：默認的構(gòu)建目標是能支持 原生 ESM 語法的 script 標簽、原生 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> 標簽中的 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)文章
vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
Console 對象提供了瀏覽器控制臺調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣，但通常都會提供一套共性的功能，本文主要總結(jié)了Console的一些高級用法，感興趣的小伙伴可以參考一下2023-04-04
elementui源碼學(xué)習(xí)之仿寫一個el-divider組件
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫一個el-divider組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項目的圖文教程，本文是針對完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下2018-05-05
本篇文章主要介紹了淺談vue-lazyload實現(xiàn)的詳細過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue中this.$emit和this.$on的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中el-date-picker選擇日期的限制的項目實踐
ElementUI的el-date-picker使用時,有時候想要限制用戶選擇的時間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項目實踐,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06