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组件，由前端路由来处理错误页面。

结束

到此结束，此致敬礼！