SpringBoot前后端分离Vue去掉url中#刷新页面报404错误

概述

对前端不是很熟悉，在做SpringBoot+Vue前后端分离项目时，使用vue-router-history去掉url中的“#”后，发现刷新前端或者直接访问url会报404

问题分析

项目的前后端是分别放在不同服务器上的
静态页面使用Nginx部署在服务器A上
SpringBoot项目用jar包方式部署在服务器B上

研究了很久，发现原因在于Vue使用history-mode后，输入URL直接访问或刷新时不会经过router，而是直接GET请求后端的接口，此时后端不存在该页面（因为前端页面不存在于Springboot下，SpringBoot项目的static文件夹是空的），所以会返回404
注：后端配置了404页面返回状态码而不是Whitelabel Error Page

解决方法

首先后端是一定要返回404状态码的，下面的内容需要写到全局错误处理controller里

    @RequestMapping("/error")
    @ResponseBody
    public Object errorHadler(HttpServletRequest request, HttpServletResponse response) {
        Map<String,Object> map=new HashMap<>();
        map.put("code",response.getStatus());
        map.put("msg","请求失败");
        map.put("data","error");
        return map;
    }

接下来正常配置vue的router-history

export default new Router({
  // 命名:组件名大驼峰、path/name小驼峰
  mode: 'history',
  base,
  routes: [
    // 这里写你自己的routes
  ]
})

此时如果你直接运行前后端，前端访问后端接口，跳转后刷新会发现一个很神奇的事情：页面404了，而且还是后端直接返回给你的404，没经过vue路由。
接下来重点来了，把你的项目打包成静态文件（HTML、CSS、JS、MAP），然后部署到nginx服务器
先排除掉项目的错误，然后配置nginx的rewrite规则，加入以下内容：

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

（重启nginx）运行项目，再次测试你会发现，原来的404问题解决了

总结

前段调的我头昏眼花的
一个写后端的去调前端，调到后半夜也都是常有的事……

参考文档

https://router.vuejs.org/zh/guide/essentials/history-mode.html