Vue-router History模式下，空白頁面，如何配置tomcat服務器

頁面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文件中添加
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

空白頁面

本覺得這樣就結束了，結果出現空白頁面，並且資源加載都沒問題，以前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組件，由前端路由來處理錯誤頁面。

結束

到此結束，此致敬禮！