vue使用webPack打包發(fā)布后頁面顯示空白的解決
更新時間：2023年06月08日 09:03:43 作者：妞我想和你一輩子
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用webPack打包發(fā)布后頁面顯示空白
今天筆者將打包后，進(jìn)行訪問，訪問到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如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue 應(yīng)用在首屏加載時速度過慢,通常與以下問題有關(guān)：打包文件過大、網(wǎng)絡(luò)請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
vue-cli項目使用mock數(shù)據(jù)的方法（借助express）
現(xiàn)如今前后端分離開發(fā)越來越普遍，前端人員寫好頁面后可以自己模擬一些數(shù)據(jù)進(jìn)行代碼測試，這樣就不必等后端接口，提高了我們開發(fā)效率。今天就來分析下前端常用的mock數(shù)據(jù)的方式是如何實現(xiàn)的,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了詳解element-ui中表單驗證的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue使用vuedraggable插件實現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下2024-04-04
vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題
這篇文章主要介紹了vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了如何本地運行vue?dist文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單驗證小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue數(shù)據(jù)回顯表單無法編輯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11