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