解決Vite打包后直接使用瀏覽器打開,顯示空白問(wèn)題
Vite打包后直接使用瀏覽器打開,顯示空白
1.需求
安卓webview等瀏覽器直接打開文件顯示
2.原因
（1）資源路徑錯(cuò)誤
vite.config.js 配置 base: “./” （在webpack中則配置publicPath: "./"即可）
（2）跨域錯(cuò)誤
script不支持file://協(xié)議跨域， 主要是因?yàn)閑sModule問(wèn)題。
如何處理
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,百度說(shuō)是更改這個(gè)會(huì)去輸出兼容瀏覽器，嘗試沒(méi)啥作用，先配置吧
}
....
})
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中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
elementui源碼學(xué)習(xí)之仿寫一個(gè)el-divider組件
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫一個(gè)el-divider組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
springboot+vue實(shí)現(xiàn)文件上傳下載
這篇文章主要為大家詳細(xì)介紹了springboot+vue實(shí)現(xiàn)文件上傳下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vue+thinkphp5.1+axios實(shí)現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了Vue+thinkphp5.1+axios實(shí)現(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包
這篇文章主要介紹了vue-cli3配置多項(xiàng)目并按項(xiàng)目分別實(shí)現(xiàn)打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3+TS實(shí)現(xiàn)語(yǔ)音播放組件的示例代碼
這篇文章主要介紹了如何利用Vue+TS實(shí)現(xiàn)一個(gè)簡(jiǎn)易的語(yǔ)音播放組件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-03-03
vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)的相關(guān)資料,在網(wǎng)頁(yè)中我們也希望可以像桌面軟件一樣,點(diǎn)擊右鍵后出現(xiàn)操作菜單,對(duì)選中的數(shù)據(jù)項(xiàng)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue事件符.capture的含義及用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06