vue使用webPack打包發(fā)布后頁面顯示空白的解決
使用webPack打包發(fā)布后頁面顯示空白
今天筆者將打包后,進行訪問,訪問到index.html,但是出現(xiàn)的是空白頁。
打包命令:npm run build,打包后的文件如下:
這是因為index.html中引入的css ,js 的路徑不對:如下圖
這個是因為webpack打包的時候引入js時使用的是絕對路徑導(dǎo)致的,修改webpack打包文件中的配置,在webpack.prod.conf.js中增加publicPath:'./' ,util.js中增加publicPath:'./',修改config/index.js
修改完后:重新打包,網(wǎng)頁展示成功。
vue+webpack項目打包問題
1、vue項目打包出現(xiàn)空白頁面
報錯頁面
解決:將config/index文件里的assetsPublicPath改為‘’./‘’
重新打包
2、vue+elementui項目打包后樣式覆蓋問題
解決:main.js中的引入順序決定了打包后css的順序,組件內(nèi)的樣式?jīng)]有生效可能是被第三方組件樣式覆蓋了,所以把第三方組件放在前面引入,router放在后面引入,就可以實現(xiàn)組件樣式在第三方樣式之后渲染
3、vue項目打包后elementui圖標(biāo)丟失問題
報錯頁面
解決:在build/utils文件如下位置添加publicPath:‘…/…/’
重新打包
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue-cli 中為單獨頁面設(shè)置背景圖片鋪滿全屏
這篇文章主要介紹了使用Vue-cli 中為單獨頁面設(shè)置背景圖片鋪滿全屏,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07ElementUI+命名視圖實現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04Vue3中defineProps設(shè)置默認值的方法實現(xiàn)
Vue3中我們經(jīng)常需要使用defineProps來定義組件的屬性,本文主要介紹了Vue3中defineProps設(shè)置默認值的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導(dǎo)出數(shù)據(jù)為xlsx、excel表格,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09