解決Vite打包后直接使用瀏覽器打開,顯示空白問題
更新時(shí)間：2024年03月15日 14:09:01 作者：change_fate
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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è)會去輸出兼容瀏覽器，嘗試沒啥作用，先配置吧
}
....
})
3.在dist并列的文件夾中創(chuàng)建腳本文件 (用于替換module等關(guān)鍵詞，省的每次得手動刪除)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)文章
這篇文章主要介紹了vue3 teleport的使用demo,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
vue 折疊展示多行文本組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 折疊展示多行文本組件，自動根據(jù)傳入的expand判斷是否需要折疊，非常完美，文章通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
vue-router實(shí)現(xiàn)嵌套路由的講解
今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
詳解使用VUE搭建后臺管理系統(tǒng)(vue-cli更新至3.0)
這篇文章主要介紹了詳解使用VUE搭建后臺管理系統(tǒng)(vue-cli更新至3.0),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue如何修改data中的obj數(shù)據(jù)的屬性
這篇文章主要介紹了vue如何修改data中的obj數(shù)據(jù)的屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue?props傳入function時(shí)的this指向問題解讀
這篇文章主要介紹了Vue?props傳入function時(shí)的this指向問題解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過程中的一些鉤子函數(shù)，這個(gè)過程中觸發(fā)的這些函數(shù)能讓你有操作一些其他的事兒的時(shí)機(jī)，這就是導(dǎo)航守衛(wèi)，守衛(wèi)適用于切面編程，即把一件事切成好幾塊，然后分給不同的人去完成，提高工作效率，也可以讓代碼變得更加優(yōu)雅2022-09-09
我們在 vue 項(xiàng)目的目錄中經(jīng)?？吹?nbsp;env 開頭的文件,在文件內(nèi)聲明一些變量,這些變量就是一些配置變量,在不同環(huán)境下可使用的變量,本文我們將給大家介紹在vue開發(fā)中如何利用.env文件,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下2018-02-02