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