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

2024年1月6日 208次阅读 来源: seomaster

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

结束

到此结束，此致敬礼！
    原文作者：seomaster
    原文地址: https://segmentfault.com/a/1190000010379441
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞