資訊專欄INFORMATION COLUMN
摘要：頁(yè)面剛用開發(fā)項(xiàng)目沒(méi)多久，很多時(shí)間都在坑里慢慢摸索，今天要填的坑是在開啟模式后，直接進(jìn)入路由子目錄，頁(yè)面會(huì)報(bào)。模式配置文檔中寫了和服務(wù)器如何配置，這里添加一下服務(wù)器里使如何配置的。結(jié)束到此結(jié)束，此致敬禮
頁(yè)面404
剛用vue開發(fā)項(xiàng)目沒(méi)多久，很多時(shí)間都在坑里慢慢摸索，今天要填的坑是在vue-router開啟history模式后，直接進(jìn)入路由子目錄，頁(yè)面會(huì)報(bào)404。為什么呢，原因很簡(jiǎn)單。因?yàn)檫@個(gè)路由子目錄在服務(wù)器上根本不存在，直接進(jìn)去，瀏覽器當(dāng)然404了。方案
所以需要后端配合，在服務(wù)器上配置一下，如果瀏覽器請(qǐng)求頁(yè)面找不到了，則統(tǒng)一返回index.html頁(yè)面，也就是把index.html當(dāng)作404來(lái)使。
[HTML5 History 模式](https://router.vuejs.org/zh-cn/essentials/history-mode.html)配置
文檔中寫了apache和nginx服務(wù)器如何配置，這里添加一下tomcat服務(wù)器里使如何配置的。 我這里的是在WEB-INF目錄下的web.xml文件中添加空白頁(yè)面404 /index.html
本以為這樣就結(jié)束了，結(jié)果出現(xiàn)空白頁(yè)面，而且資源加載都沒(méi)問(wèn)題，之前hash模式，一切正常，改為history模式就掛了，一臉懵逼。
然后查資料修改測(cè)試了兩個(gè)小時(shí)，才發(fā)現(xiàn)是因?yàn)槲疫@里vue發(fā)布后的代碼是放在/COMS目錄，也就是說(shuō)不是根目錄，這種情況下得在路由配置文件中添加base根目錄：
const router = new Router({
//開啟history模式需要后端配置404時(shí)返回/index.html
mode: "history",
//當(dāng)項(xiàng)目不在根目錄時(shí)，必須添加子目錄路徑，否則空白頁(yè)面（資源加載正常）
base: "/COMS",
routes: [
//404頁(yè)面
{ path: "*", component: ErrorPage },
{...}
]
})
兩步解決問(wèn)題，可以直接http://www.demo.com/login進(jìn)入頁(yè)面，完美！
但是如果訪問(wèn)了一個(gè)不存在的路由，http://www.demo.com/loginxxx，這時(shí)候怎么辦？
看上面，給出的代碼已經(jīng)寫了，添加一個(gè)ErrorPage組件，由前端路由來(lái)處理錯(cuò)誤頁(yè)面。
結(jié)束
到此結(jié)束，此致敬禮！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84379.html
摘要：文章涉及到路由模塊化，懶加載，安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種。無(wú)法啟動(dòng)服務(wù)，報(bào)錯(cuò)參考資料發(fā)現(xiàn)端口沖突，已經(jīng)在服務(wù)中已經(jīng)配置端口。服務(wù)端口更改為。 文章涉及到VUE路由模塊化，懶加載，nginx安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種BUG。參考了很多方法，會(huì)在文章中引用出來(lái)...
摘要：模式部署沒(méi)有什么問(wèn)題，只要訪問(wèn)到服務(wù)器上的，就可以訪問(wèn)網(wǎng)站了。問(wèn)題起因在做年度賬單項(xiàng)目的時(shí)候，項(xiàng)目部署的時(shí)候，用的是模式。這樣幾項(xiàng)配置后，就可以在子目錄下訪問(wèn)網(wǎng)站，刷新也沒(méi)有問(wèn)題。 寫在前面 Vue-Router 有兩種模式，默認(rèn)是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號(hào)。比如 http://www.example/#/hello，...
閱讀 3442·2021-11-22 09:34
閱讀 1909·2019-08-30 12:53
閱讀 3505·2019-08-28 18:07
閱讀 2991·2019-08-27 10:55
閱讀 2968·2019-08-26 10:12
閱讀 3602·2019-08-23 18:21
閱讀 1352·2019-08-23 14:10
閱讀 1489·2019-08-23 13:04
