解決Vite打包后直接使用瀏覽器打開,顯示空白問題
更新時間：2024年03月15日 14:09:01 作者：change_fate
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vite打包后直接使用瀏覽器打開,顯示空白
1.需求
安卓webview等瀏覽器直接打開文件顯示
2.原因
（1）資源路徑錯誤
vite.config.js 配置 base: “./” （在webpack中則配置publicPath: "./"即可）
（2）跨域錯誤
script不支持file://協(xié)議跨域， 主要是因為esModule問題。
如何處理
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'], // 默認是modules,百度說是更改這個會去輸出兼容瀏覽器，嘗試沒啥作用，先配置吧
}
....
})
3.在dist并列的文件夾中創(chuàng)建腳本文件 (用于替換module等關(guān)鍵詞，省的每次得手動刪除)toFile.mjs
創(chuàng)建 toFiles.mjs (為啥格式不是js為了執(zhí)行命令不報兼容的錯誤)
import fs from 'fs';
console.time('轉(zhuǎn)換耗時');
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)換耗時');
4.package.json命令改為：
"build": "vite build && node toFile.mjs",
npm run build 之后打開index.html文件：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中的請求攔截器和響應攔截器用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
elementui源碼學習之仿寫一個el-divider組件
這篇文章主要為大家介紹了elementui源碼學習之仿寫一個el-divider組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了springboot+vue實現(xiàn)文件上傳下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue+thinkphp5.1+axios實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了Vue+thinkphp5.1+axios實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue-cli3配置多項目并按項目分別實現(xiàn)打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了如何利用Vue+TS實現(xiàn)一個簡易的語音播放組件，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下2022-03-03
vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)的相關(guān)資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點擊右鍵后出現(xiàn)操作菜單,對選中的數(shù)據(jù)項進行相應的操作,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的跑馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06