相信很多小伙伴在用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等問題嘀韧。遇到這些問題不要慌張，正確的配置加上后端的簡單配合就可以解決暗赶。
下面筆者根據(jù)自己Vue項(xiàng)目從編譯打包到正常部署服務(wù)器的經(jīng)驗(yàn)肃叶，來告訴大家如何解決這些問題。
一岳锁、前端配置：
①蹦魔、router配置--指定路由起始(在開發(fā)模式中，Vue項(xiàng)目被放在了webpack配合nodeJs生成的本地服務(wù)器的根目錄乒躺，但是在真實(shí)服務(wù)器中低缩，項(xiàng)目肯定不會(huì)放在根目錄，所以要指定router的base)
提前和后端商量好項(xiàng)目部署的服務(wù)器文件夾路徑
②讳推、編譯打包配置
進(jìn)入config --> index.js
③银觅、使用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
leibo.group/app/.... 重寫為 leibo.group/app/index.html
具體的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ù)牡胤浇婢保€望指出爬坑！
