淺談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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)超過兩行顯示展開收起的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用)
這篇文章主要介紹了vue3發(fā)送驗(yàn)證碼倒計(jì)時(shí)功能的實(shí)現(xiàn)(防止連點(diǎn)、封裝復(fù)用),實(shí)現(xiàn)思路是點(diǎn)擊發(fā)送驗(yàn)證碼，驗(yàn)證碼倒計(jì)時(shí)，校驗(yàn)手機(jī)號(hào)是否正常等一系列操作，本文通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼
這篇文章主要介紹了vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)，文中我們使用v-model加watch 實(shí)現(xiàn)這一個(gè)功能,代碼簡(jiǎn)單易懂，需要的朋友可以參考下2019-11-11
下面小編就為大家分享一篇vue中axios解決跨域問題和攔截器的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
解決vue ui報(bào)錯(cuò)Couldn‘t parse bundle asset“C:
這篇文章主要介紹了解決vue ui報(bào)錯(cuò)Couldn‘t parse bundle asset“C:\Users\Administrator\vue_project1\dist\js\about.js“. Analyzer問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的相關(guān)資料,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下2022-03-03
vue?iview?導(dǎo)航高亮動(dòng)態(tài)設(shè)置方式
這篇文章主要介紹了vue?iview?導(dǎo)航高亮動(dòng)態(tài)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程
這篇文章主要為大家詳細(xì)介紹了vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09