解決Vite打包后直接使用瀏覽器打開,顯示空白問題
更新時(shí)間：2024年03月15日 14:09:01 作者：change_fate
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vite打包后直接使用瀏覽器打開,顯示空白
1.需求
安卓webview等瀏覽器直接打開文件顯示
2.原因
（1）資源路徑錯(cuò)誤
vite.config.js 配置 base: “./” （在webpack中則配置publicPath: "./"即可）
（2）跨域錯(cuò)誤
script不支持file://協(xié)議跨域， 主要是因?yàn)閑sModule問題。
如何處理
1.安裝 npm install @vitejs/plugin-legacy
2.配置 vite.config.js
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
....
plugins: [legacy({
targets: ['defaults', 'not IE 11']
}),vue()],
build:{
target: ['es2015', 'chrome63'], // 默認(rèn)是modules,百度說是更改這個(gè)會(huì)去輸出兼容瀏覽器，嘗試沒啥作用，先配置吧
}
....
})
3.在dist并列的文件夾中創(chuàng)建腳本文件 (用于替換module等關(guān)鍵詞，省的每次得手動(dòng)刪除)toFile.mjs
創(chuàng)建 toFiles.mjs (為啥格式不是js為了執(zhí)行命令不報(bào)兼容的錯(cuò)誤)
import fs from 'fs';
console.time('轉(zhuǎn)換耗時(shí)');
const distPath = './dist/index.html';//打包路徑的index.html
let htmlText = fs.readFileSync(distPath, 'utf8');
let resultText = '';
let htmlArr = htmlText.match(/.*\n/g) || [];
htmlArr.forEach(str => {
str = str.replace(/\s?nomodule\s?/g,' ');
str = str.replace(/\s?crossorigin\s?/g,' ');
str = str.replace(/data-src/g,'src');
if(!/type="module"/i.test(str)) resultText += str;
});
fs.writeFileSync(distPath,resultText,'utf8');
console.timeEnd('轉(zhuǎn)換耗時(shí)');
4.package.json命令改為：
"build": "vite build && node toFile.mjs",
npm run build 之后打開index.html文件：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-03-03
vue2移動(dòng)端使用vue-qrcode-reader實(shí)現(xiàn)掃一掃功能的步驟
最近在使用vue開發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于vue2移動(dòng)端使用vue-qrcode-reader實(shí)現(xiàn)掃一掃功能的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3?+?async-validator實(shí)現(xiàn)表單驗(yàn)證的示例代碼
表單驗(yàn)證可以有效的過濾不合格的數(shù)據(jù)，減少服務(wù)器的開銷，并提升用戶的使用體驗(yàn)，今天我們使用?vue3?來做一個(gè)表單驗(yàn)證的例子，需要的朋友跟隨小編一起學(xué)習(xí)下吧2022-06-06
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue Router初始化路由信息的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下2023-11-11
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內(nèi)容詳細(xì)，簡(jiǎn)單易懂，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2023-01-01
vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
最近學(xué)習(xí)了Vue3,利用vue3做了個(gè)好玩的項(xiàng)目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue項(xiàng)目利用axios請(qǐng)求接口下載excel
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目利用axios請(qǐng)求接口下載excel，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11