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