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