浏览器ide中使用hashmode的解决方案

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

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

解决方案如下：

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

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

说完解决方案以后，剖析下诱因：

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

VueRouter本身支持两种模式，即history和hash。historymode使用了H5的HistoryAPI，这个API容许在不刷新页面的情况下修改浏览器的URL，即URL中不包含hash(#)符号，使用的是真正的URL，即真正的路由地址，比如：:8080/doc/doc/log

这些模式少了hash符合，让URL看上去更简练，更美观，也对SEO愈加有利。

hashmode则是使用hash（#）符号来模拟完整的URL，真正的URL一直是/。使用hashmode时，浏览器的URL中的hash发生变化时，浏览器不会重新加载页面，而是通过窃听hash变化风波来实现页面更新。

使用hashmode时浏览器的地址是这样的：:9150/#/doc/doc/log

那为何使用historymode在tomcat里就难以正常刷新页面了呢？由于tomcat本身不支持这个模式，所以假如你的项目和我的项目一样，不须要考虑SEO哪些的，可以简单处理一下，直接在创建VueRouter实例的时侯指定使用hashmode，这样就不用去更改tomcat的配置来支持historymode了。

那假如你须要使用historymode，可以更改tomcat的server.xml中的Connector元素，在上面提那家一个rewriterValue重画规则引擎，该引擎将重画恳求的URL，将恳求转发到正确的后端控制器。

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

在server.xml中的元素中，添加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">
      
      <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，重新访问项目。假如还是有问题，可以尝试清空浏览器缓存重试。