解决Vue前端项目打包部署到tomcat后浏览器F5刷新页面404问题

前后端分离项目，前端项目在ide中运行，浏览器直接按F5刷新和调试均未出现问题。

打包部署到tomcat之后，在浏览器F5刷新页面会出现404问题。

解决方案如下：

在路由配置文件中，找到如下代码，将 mode 修改为 hash 重新打包部署即可。

export default new Router({
  mode: 'hash', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

说完解决方案之后，分析下原因：

Tomca服务器本身不支持Vue中的 HTML5 History Mode，而之前的配置，正是 history ，所以会出现问题。

Vue Router本身支持两种模式，即 history 和 hash。history mode使用了 H5 的 History API，这个API允许在不刷新页面的情况下更改浏览器的URL，即URL中不包含 hash(#) 符号，使用的是真正的URL，即真正的路由地址，例如： http://localhost:8080/doc/doc/log

这种模式少了 hash 符合，让URL看起来更简洁，更美观，也对SEO更加有利。

hash mode 则是使用 hash（#） 符号来模拟完整的URL，真正的URL仍然是 / 。使用hash mode时，浏览器的URL中的hash发生变化时，浏览器不会重新加载页面，而是通过监听 hash 变化事件来实现页面更新。

使用hash mode时浏览器的地址是这样的：http://localhost:9150/#/doc/doc/log

那为什么使用 history mode 在tomcat里就无法正常刷新页面了呢？因为tomcat本身不支持这个模式，所以如果你的项目和我的项目一样，不需要考虑SEO什么的，可以简单处理一下，直接在创建 Vue Router 实例的时候指定使用 hash mode，这样就不用去修改tomcat的配置来支持 history mode了。

那如果你需要使用 history mode ，可以修改 tomcat 的 server.xml 中的Connector元素，在里面提那家一个 rewriterValue 重写规则引擎，该引擎将重写请求的URL，将请求转发到正确的前端控制器。

如下是一个示例，不保证完全可行，仅供参考：

在 server.xml中的 <Connector>元素中，添加 rewriterValue 规则引擎；

<Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443"
               URIEncoding="UTF-8"
               useBodyEncodingForURI="true"
               enableLookups="false"
               useIPVHosts="false"
               maxThreads="200"
               minSpareThreads="10"
               maxSpareThreads="100"
               maxKeepAliveRequests="1">
      <!-- 添加 rewriteValve 规则引擎配置 -->
      <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
    </Connector>

在项目的根目录下创建一个名为 WEB-INF 的目录，在该目录下创建一个名为 rewrite.config的文件，在文件中添加如下配置；

RewriteCond %{SERVLET_PATH} !(.*\..*)$ 
RewriteRule ^(.*)$ /index.html [NC,L]

这个配置的作用是将所有不包含文件扩展名（比如 .html 或 .css）的请求都重定向到 /index.html，从而让您的 Vue 应用程序正确处理路由路径。

然后重启tomcat，重新访问项目。如果还是有问题，可以尝试清空浏览器缓存重试。