vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決
使用webPack打包發(fā)布后頁(yè)面顯示空白
今天筆者將打包后，進(jìn)行訪問(wèn)，訪問(wèn)到index.html，但是出現(xiàn)的是空白頁(yè)。
打包命令：npm run build，打包后的文件如下：
這是因?yàn)閕ndex.html中引入的css ,js 的路徑不對(duì):如下圖
這個(gè)是因?yàn)閣ebpack打包的時(shí)候引入js時(shí)使用的是絕對(duì)路徑導(dǎo)致的，修改webpack打包文件中的配置，在webpack.prod.conf.js中增加publicPath:'./' ,util.js中增加publicPath:'./'，修改config/index.js
修改完后：重新打包，網(wǎng)頁(yè)展示成功。
vue+webpack項(xiàng)目打包問(wèn)題
1、vue項(xiàng)目打包出現(xiàn)空白頁(yè)面
報(bào)錯(cuò)頁(yè)面
解決：將config/index文件里的assetsPublicPath改為‘’./‘’
重新打包
2、vue+elementui項(xiàng)目打包后樣式覆蓋問(wèn)題
解決：main.js中的引入順序決定了打包后css的順序，組件內(nèi)的樣式?jīng)]有生效可能是被第三方組件樣式覆蓋了，所以把第三方組件放在前面引入，router放在后面引入，就可以實(shí)現(xiàn)組件樣式在第三方樣式之后渲染
3、vue項(xiàng)目打包后elementui圖標(biāo)丟失問(wèn)題
報(bào)錯(cuò)頁(yè)面
解決：在build/utils文件如下位置添加publicPath:‘…/…/’
重新打包
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇淺談vue的幾種綁定變量的值 防止其改變的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了Vue3中依賴注入provide、inject的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章簡(jiǎn)單給大家介紹了Vue項(xiàng)目中使用keep-Alive步驟，在vue2.1.0之前，實(shí)現(xiàn)方式也給大家作了簡(jiǎn)單介紹，感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue2實(shí)現(xiàn)手勢(shì)密碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在編寫Vue代碼的時(shí)候,經(jīng)常會(huì)碰到各種權(quán)限問(wèn)題,本文主要介紹了Vue按鈕權(quán)限的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
使用Vue-cli 中為單獨(dú)頁(yè)面設(shè)置背景圖片鋪滿全屏
這篇文章主要介紹了使用Vue-cli 中為單獨(dú)頁(yè)面設(shè)置背景圖片鋪滿全屏，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了從0到1搭建Element的后臺(tái)框架的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn)
Vue3中我們經(jīng)常需要使用defineProps來(lái)定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認(rèn)值的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09