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