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

EddieChan 发布于2019-08-20 18:20 / 1752人阅读

摘要：页面刚用开发项目没多久，很多时间都在坑里慢慢摸索，今天要填的坑是在开启模式后，直接进入路由子目录，页面会报。模式配置文档中写了和服务器如何配置，这里添加一下服务器里使如何配置的。结束到此结束，此致敬礼

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

结束

到此结束，此致敬礼！

GPU云服务器云服务器 linux下tomcat的配置 ecs windows系统下安装配置tomcat方法阿里云服务器如何配置tomcat 多地办学模式下的视频会议系统如何组建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84379.html

VUE-Router按模块配置、懒加载+ Windows中Nginx服务安装、配置解决404

摘要：文章涉及到路由模块化，懒加载，安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种。无法启动服务，报错参考资料发现端口冲突，已经在服务中已经配置端口。服务端口更改为。文章涉及到VUE路由模块化，懒加载，nginx安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种BUG。参考了很多方法，会在文章中引用出来...

habren 2019-07-25 14:37 评论0 收藏0
Vue项目部署遇到的问题及解决方案

摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

姘搁『 2019-08-23 14:38 评论0 收藏0