前端vue项目部署到tomcat，一刷新报错404解决方法

原文链接：https://my.oschina.net/u/1471354/blog/4277008

VUE项目部署到Tomcat之后，刷新页面会出现404。此问题主要是使用了VUE router的History模式

一、解决方案

1-编辑server.xml，在Host的Context中增加以下内容，增加Valve部分内容

<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true">
  <Context path="/" docBase="front" reloadable="false" >
      <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  </Context>
</Host>

2-在项目下的WEB-INF文件夹（没有WEB-INF需要创建）中创建rewrite.config文件，文件内容如下：

#rewrite for tomcat

RewriteRule ^/index\.html$ - [L]

RewriteCond %{REQUEST_PATH} !-f
RewriteRule (.*) /index.html [L]

以上步骤配置完成之后，重新启动tomcat，404问题就可以解决了

二、问题原理，及更多详解：

VUE router 的history模式问题解答： https://router.vuejs.org/zh/guide/essentials/history-mode.html

在使用这个模式的时候，跳转的连接，直接刷新会提示找不到静态资源，所以要对这个进行兼容。 兼容此问题用到tomcat的rewrite，具体解释详见： http://tomcat.apache.org/tomcat-8.5-doc/rewrite.html。

中文介绍（也可以使用谷歌翻译看原文档）： https://wiki.jikexueyuan.com/project/tomcat/rewrite.html

1-tomcat的rewrite介绍。

简介
   重写 Valve（Rewrite Valve） 实现 URL 重写功能的方式非常类似于 Apache HTTP Server 的 mod_rewrite 模块。
配置
   重写 Valve 是通过使用 org.apache.catalina.valves.rewrite.RewriteValve 类名来配置成 Valve 的。
   经过配置，重写 Valve 可以做为一个 Valve 添加到 Host 中。参考虚拟服务器文档来了解配置详情。该 Valve 使用包 
   含重写指令的 rewrite.config 文件，且必须放在 Host 配置文件夹中。
   另外，重写 valve 也可以用在 Web 应用的 context.xml 中。该 Valve 使用包含重写指令的 rewrite.config 文 
   件，且必须放在 Web 应用的 WEB-INF 文件夹中。

2-具体使用

2-1如果将valve配置在HOST中，则rewrite.config文件必须放在Host配置文件夹中，示例如下：

编辑server.xml，在Host中增加RewriteValve

<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true">
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  <Context path="/" docBase="front" reloadable="false" /
</Host>

此时，rewrite.config需要放在如下位置：<catalina_base>/conf/Catalina/<Host.name>/rewrite.config

例如我的<catalina_base>是/home/tomcat，<Host.name>是localhost。则存放位置为/home/tomcat/conf/Catalina/localhost/rewrite.config

2-2如果valve配置在Context中，则rewrite.config文件必须放在 Web 应用的 WEB-INF 文件夹中。

server.xml（这里配置只针对单个应用生效）

<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">

    <Context path="/" docBase="front" reloadable="false" >

        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

    </Context>

</Host>

或者直接在context.xml中配置，这里配置全局生效

<?xml version='1.0' encoding='utf-8'?>

<!-- The contents of this file will be loaded for each web application -->

<Context>

    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

    <WatchedResource>WEB-INF/web.xml</WatchedResource>

    <WatchedResource>${catalina.base}/conf/web.xml</WatchedResource>

</Context>

此情况下，rewrite.config需要放在如下位置：<Host.appBase>/<docBase>/WEB-INF/rewrite.config

例如<Host.appBase>是webapps，<docBase>是front。则具体位置为：webapps/front/WEB-INF/rewrite.config

rewrite.config文件内容

#rewrite for tomcat
#内容解释 第一个规则是如果匹配到index.html文件不进行重写
RewriteRule ^/index\.html$ - [L]

#第二个规则，如果请求路径不是项目中的静态资源，跳转到 index.html 交给vue-router处理。
RewriteCond %{REQUEST_PATH} !-f
RewriteRule (.*) /index.html [L]