vue3無config文件夾打包后頁面空白問題及解決
vue3無config文件夾打包后頁面空白
項(xiàng)目場(chǎng)景
項(xiàng)目場(chǎng)景：vue文件打包之后頁面空白（全）
場(chǎng)景1：vue2有config文件夾
找到config文件夾下的index.js文件，將 assetsPublicPath: "/"改為assetsPublicPath: "./"
原理： 打包之后的index.html找不到相關(guān)的資源，默認(rèn)/在同級(jí)查找，沒有找到，如果上面改完之后還是不行，請(qǐng)仔細(xì)檢查打包后的項(xiàng)目結(jié)構(gòu)，修改這個(gè)assetsPublicPath
場(chǎng)景2：vue3無config文件夾
找到項(xiàng)目中的vue.config.js文件（如果沒有可以照著圖中的項(xiàng)目結(jié)構(gòu)建一個(gè)），然后在里面添加
module.exports = {
publicPath: './', // 根域上下文目錄
outputDir: 'dist', // 構(gòu)建輸出目錄，可不寫
assetsDir: 'assets', // 靜態(tài)資源目錄 (js, css, img, fonts)，可不寫
};
就可以了，里面的路徑原理和場(chǎng)景1一樣，可自行按照實(shí)際項(xiàng)目需求修改
目錄結(jié)構(gòu)沒有config文件夾
問題：
在頁面完成后，打包上線頁面出現(xiàn)白屏問題。百度到的，解決辦法是，改變config文件夾下，index.js中，build下的 assetsPublicPath："/" => assetsPublicPath："./"。隨后發(fā)現(xiàn)創(chuàng)建的是vue3的項(xiàng)目沒有config文件夾。
解決方案
在項(xiàng)目根目錄，創(chuàng)建 vue.config.js 文件，文件內(nèi)容如下：
module.exports={
publicPath:"./"
}
解決！以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Babel是一個(gè)JS編譯器,主要作用是將ECMAScript2015+ 版本的代碼,轉(zhuǎn)換為向后兼容的JS語法,以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其它環(huán)境中,下面這篇文章主要給大家介紹了關(guān)于Vue中babel.config.js配置詳解的相關(guān)資料,需要的朋友可以參考下2023-02-02
使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式
這篇文章主要介紹了使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue中下載文件后無法打開的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue中v-if、v-if-else、v-else-if與v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于條件性地渲染一塊內(nèi)容,這塊內(nèi)容只會(huì)在指令的表達(dá)式返回truth值的時(shí)候被渲染,這篇文章主要給大家介紹了關(guān)于Vue中v-if、v-if-else、v-else-if與v-show的基本使用,需要的朋友可以參考下2022-10-10
vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動(dòng)輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國地圖的繪制以及拖動(dòng)、縮放和各省份自動(dòng)輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
Vue新手指南之創(chuàng)建第一個(gè)vue-cli腳手架程序
vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個(gè)vue-cli程序的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue3.0-props、computed、自定義事件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue組件的計(jì)算屬性和普通屬性的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01