解决单页应用 history 模式下部署 tomcat 刷新页面出现 404

朱雀 2021-03-24 08:24 1177阅读 0赞

我们以当下最流行的 JS 框架 vue 为例，其路由跳转一般结合 vue-router 进行，而 vue-router 默认用 hash 来模拟整个完整的 URL（如：http://www.dandelioncloud.cn/#/archives/17），页面间跳转不会重新加载。

如果你感觉这种链接比较丑，可以采用 history 模式，这样 URL 看过去就比较正常美观，如：http://www.dandelioncloud.cn/archives/17，由于这种模式采用 history.pushState 完成页面间跳转，因此与 hash 模式一样无需重新加载。

但是当你手动刷新页面的时候，会发现页面找不到，返回 404 了，这是由于在服务器端匹配不到任何静态资源，因此返回 404。

不过不用担心，总有解决办法，官网（https://router.vuejs.org/zh/guide/essentials/history-mode.html）上已给出各种服务器的解决方式，唯独没有 tomcat 的，这里就补充说明下服务部署在 tomcat 下面的解决方式。

在 tomcat 的 webapps 目录下进入单应用项目文件夹创建 WEB-INF/web.xml，内容如下：

```
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>
```

或者更暴力一点，直接修改 tomcat 目录下的 conf/web.xml，在 <web-app></web-app> 节点中增加如下内容：

```
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
```

配置完成后，重启下 tomcat，再刷新页面看看，是不是已大功告成？

该方式同样对 uni-app 等开发的单页应用有效。