vue项目404错误，浏览器手动刷新404

博主介绍： 大家好，我是想成为Super的Yuperman，互联网宇宙厂经验，17年医疗健康行业的码拉松奔跑者，曾担任技术专家、架构师、研发总监负责和主导多个应用架构。
技术范围： 目前专注java体系，有多年java、golang、.Net、DDD、软件架构、redis、nginx、tomcat、mysql、oracle等经验
业务范围： 对传统业务应用技术转型，从数字医院到区域医疗，从院内业务系统到互联网医院及健康服务，从公立医院到私立医院都有一些经历及理解
*** 为大家分享一些技术积累，欢迎交流合作 持续关注Yuperman ***

vue项目部署后，项目页面及功能正常浏览，但是当使用浏览器的刷新功能进行刷新时报错404，或按F5时404错误

vue 单页面及路由模式引起的问题

本文环境

后端 ：tomcat war包部署
前端： tomcat webapps下部署

1.问题描述

vue项目部署后，业务系统功能页面都可以正常访问，但是当用户当使用浏览器的刷新功能进行刷新时报错404，或按F5时报404错误。

排查步骤：

• vue 页面
• nginx 配置
• tomcat 配置

由于业务项目之前都是单体部署，当前项目采用了nginx做部署且没有做前后端分离，直接将前后端文件都放置到了tomcat中，后端使java的war包部署，前端使vue2的页面。

---

2.问题原因

Vue路由刷新404的问题，通常是由于Vue是单页应用（SPA），在刷新页面时，浏览器会向服务器请求对应的路由，但在服务器端并没有对应的路由设置，所以返回了404错误。

vue是单页应用，主要有vue的路由模式引起

1.hash 模式（默认）的访问URL中有 # 字符，history模式的URL没有带#，外观上history模式比hash模式好看些；

2.hash模式通过监听浏览器的onhashchange()事件变化，查找对应的路由规则；history模式是利用h5的history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听其URL变化；

3.hash模式能兼容到IE8，history模式 只能兼容到 IE10；

4.由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对服务器完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

---

3.解决方法：

解决vue 刷新页面404为需要
1、vue线上应用采用history模式
2、前后端文件分离
3、分离后对nginx进行错误重定向的配置。

让所有的vue项目请求都返回到Vue的index文件，然后由Vue Router来处理路由。

location / {
    try_files $uri $uri/ /index.html;
}

   # 根请求会指向的页面
        location / {
          try_files $uri $uri/ /index.html last;
          index index.html;
        }

注：修改配置需要重启nginx生效，如果项目没有要求，也可以使用hash模式，hash模式无404 问题

---

4.案例总结：

hash模式在每次刷新页面时是直接更改“#”后的路径，history模式每次刷新会重新像服务器重新请求资源，但是服务器会把vue的路由地址当成文件路径访问（如: /pages/index），服务器又没有这个文件路径，且服务端没有配置相应的路由重定向，就会访问404，也就是本文开头提到的问题；history模式的好处是可以进行修改历史记录，并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。