vue使用webPack打包發(fā)布后頁面顯示空白的解決
更新時間：2023年06月08日 09:03:43 作者：妞我想和你一輩子
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用webPack打包發(fā)布后頁面顯示空白
今天筆者將打包后，進行訪問，訪問到index.html，但是出現的是空白頁。
打包命令：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項目打包出現空白頁面
報錯頁面
解決：將config/index文件里的assetsPublicPath改為‘’./‘’
重新打包
2、vue+elementui項目打包后樣式覆蓋問題
解決：main.js中的引入順序決定了打包后css的順序，組件內的樣式沒有生效可能是被第三方組件樣式覆蓋了，所以把第三方組件放在前面引入，router放在后面引入，就可以實現組件樣式在第三方樣式之后渲染
3、vue項目打包后elementui圖標丟失問題
報錯頁面
解決：在build/utils文件如下位置添加publicPath:‘…/…/’
重新打包
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在Vue中,通常需要將圖片存儲在服務器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務器或磁盤的圖片的相關資料,需要的朋友可以參考下2024-02-02
Vue 應用在首屏加載時速度過慢,通常與以下問題有關：打包文件過大、網絡請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
vue-cli項目使用mock數據的方法（借助express）
現如今前后端分離開發(fā)越來越普遍，前端人員寫好頁面后可以自己模擬一些數據進行代碼測試，這樣就不必等后端接口，提高了我們開發(fā)效率。今天就來分析下前端常用的mock數據的方式是如何實現的,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了詳解element-ui中表單驗證的三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue使用vuedraggable插件實現拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁面引入的方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue中解決異步交互數據出現延遲問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了如何本地運行vue?dist文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細介紹了vue實現表單驗證小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue數據回顯表單無法編輯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11