Vue 項(xiàng)目部署到服務(wù)器的問題解決方法
相信很多小伙伴在用Vue-cli安裝的腳手架開發(fā)的時(shí)候，在開發(fā)環(huán)境中項(xiàng)目可以很正常的運(yùn)行，但是進(jìn)入到生產(chǎn)環(huán)境，編譯打包后，放入服務(wù)器，項(xiàng)目就不正常了，會(huì)出現(xiàn)空白頁或者路由跳轉(zhuǎn)404等問題。遇到這些問題不要慌張，正確的配置加上后端的簡(jiǎn)單配合就可以解決。
如何打包
基于Vue-Cli,通過npm run build來進(jìn)行打包的操作
如何部署
- 將打包出來的資源，基于Vue-Cli的一般是dist目錄下有static目錄和index.html文件，可以直接將這兩個(gè)文件扔到服務(wù)端
- 但有時(shí)候，我們會(huì)直接將dist文件扔到服務(wù)端
出現(xiàn)的問題
- 打包到服務(wù)器后，出現(xiàn)資源引用路徑的問題
- 打包到服務(wù)器后，出現(xiàn)空白頁的問題
- 打包到服務(wù)器后，出現(xiàn)引入的css的type被攔截轉(zhuǎn)換為"text/plain"問題
- 打包到服務(wù)器后，出現(xiàn)路由刷新404的問題
下面筆者根據(jù)自己Vue項(xiàng)目從編譯打包到正常部署服務(wù)器的經(jīng)驗(yàn)，來告訴大家如何解決這些問題。
一、前端配置：
①、router配置--指定路由起始(在開發(fā)模式中，Vue項(xiàng)目被放在了webpack配合nodeJs生成的本地服務(wù)器的根目錄，但是在真實(shí)服務(wù)器中，項(xiàng)目肯定不會(huì)放在根目錄，所以要指定router的base)
router
提前和后端商量好項(xiàng)目部署的服務(wù)器文件夾路徑
②、編譯打包配置
進(jìn)入config --> index.js
build
③、使用npm run build進(jìn)行打包，至此前端能做的配置已經(jīng)做完
二、后端配置：
路由跳轉(zhuǎn)出現(xiàn)404，主要原因是后端對(duì)這個(gè)虛擬的前端路由沒有做任何處理，服務(wù)器在找不到指定路徑下的資源時(shí)，只能向客戶端返回404。
解決辦法(Apache)：進(jìn)行url重寫 --- 將Vue項(xiàng)目所在服務(wù)器文件夾下的路徑，例如：
leibo.group/pcMall/.... 重寫為 leibo.group/pcMall/index.html
.hatccess
具體的Apache開啟allowoverride ，url重寫，后端分分鐘就解決了
如果是其他類型服務(wù)器
請(qǐng)自行參考https://router.vuejs.org/zh-cn/essentials/history-mode.html
總結(jié)：在單頁面部署服務(wù)器中，其實(shí)更多的是思想的改變，利用前端路由來控制用戶界面內(nèi)容的變更，以上就是筆者在項(xiàng)目部署服務(wù)器中的一些經(jīng)驗(yàn)，如果有什么闡述的不當(dāng)?shù)牡胤?，還望指出！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue柱狀進(jìn)度條圖像的完美實(shí)現(xiàn)方案
本文是對(duì)bar進(jìn)度條實(shí)現(xiàn)的2種方案進(jìn)行分享，第一種是很簡(jiǎn)單，純css的實(shí)現(xiàn)，第二種是echart的實(shí)現(xiàn)。對(duì)vue柱狀進(jìn)度條圖像的實(shí)現(xiàn)方案，感興趣的朋友跟隨小編一起看看吧2019-08-08
基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue axios同步請(qǐng)求解決方案,需要的朋友可以參考下2017-09-09
vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐
本文主要介紹了vue+el-element中根據(jù)文件名動(dòng)態(tài)創(chuàng)建dialog的方法實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
項(xiàng)目開發(fā)中需要做一個(gè)輪詢,所以將實(shí)現(xiàn)的過程記錄了一下,下面這篇文章主要給大家介紹了關(guān)于vue輪詢解決方案的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
有不少的前端需求都需要使用到富文本編輯器,所以這篇文章主要來和大家介紹一下如何在Vue3項(xiàng)目中使用富文本編輯器,感興趣的可以了解下2024-04-04
這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02