淺談VUE項目打包后運行頁面一片白問題
1、說明
我們用VUE搭建一個腳手架后，在IDEA等工具中開發(fā)時，啟動都沒有什么問題，但是項目開發(fā)完成之后，可能需要部署上線，所以需要進行打包操作了，一般都是用下面命令進行打包：
npm run build
打包過程一般沒有什么問題，然后就會在工程目錄下生成一個【dist]文件夾，里面就是我們打包好的文件，把這些文件部署到Nginx中或者Tomcat中就可以了
2、問題說明
那么我碰到的問題是，Nginx運行之后，訪問前端項目時，瀏覽器中一片空白，沒有報任何錯誤
開始我以為是Nginx的問題，排查了很久，發(fā)現(xiàn)不是Nginx的問題，是我打包的問題
3、解決
這是因為在打包的時候，沒有修改路徑，build默認打包路徑是根路徑，所以需要修改下面三個文件：
3.1、index.js
config文件下的index.js，按照下圖說明進行修改即可：
3.2、utils.js
build文件下的utils.js，按照下圖說明進行修改即可：
3.3、webpack.prod.conf.js
build文件下的webpack.prod.conf.js，按照下圖說明進行修改即可：
以上三個文件修改完成之后，再重新打包就可以了，部署啟動后，登錄首頁就可以正常訪問了
4、總結
我本地的前端VUE項目是這樣操作一下就可以正常部署訪問了，但可能大家環(huán)境各不一樣，說不定這樣設置后還是不行也有可能，所以我這里只是記錄一下我的處理方式，僅供大家參考一下，祝君好運！
到此這篇關于淺談VUE項目打包后運行頁面一片白問題的文章就介紹到這了,更多相關VUE打包運行頁面一片白內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中echarts自動輪播tooltip問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.js+elementUI實現(xiàn)點擊左右箭頭切換頭像功能（類似輪播圖效果）
這篇文章主要介紹了vue.js+elementUI實現(xiàn)點擊左右箭頭切換頭像功能（類似輪播圖），本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關資料,需要的朋友可以參考下2023-02-02
Vue3中的setup是一個新的生命周期函數(shù),它可以用來代替組件中的 data和一些生命周期函數(shù)（如created和beforeMount）,這篇文章主要介紹了vue3如何使用setup代替created的相關資料,需要的朋友可以參考下2023-09-09
Vue3+TypeScript封裝axios并進行請求調用的實現(xiàn)
這篇文章主要介紹了Vue3+TypeScript封裝axios并進行請求調用的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定的原理以及知識點總結，并做了代碼實例分析，有需要的朋友參考下。2018-04-04
在vue3項目開發(fā)中,我們常常會遇到父子組件相互調用的場景,下面主要以setup語法糖格式詳細聊聊父子組件那些事兒,并通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-05-05
vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享
今天小編就為大家?guī)硪黄獀ue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue+elementUI實現(xiàn)動態(tài)面包屑
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)動態(tài)面包屑，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
fontawesome的圖標有免費版和專業(yè)版,本文主要使用free版本,一般free版本的圖標夠用,free圖標又劃分為三個圖標庫,主要有實心圖標solid、常規(guī)圖標regular及品牌圖標brand,根據(jù)需求去下載對應的圖標庫,無須全部下載,對vue?fontawesome圖標庫相關知識感興趣的朋友一起看看吧2023-12-12