当使用 history 模式的前端路由时静态资源服务器配置详解

前言

对于前端工程师而言，多多少少会碰到按需加载的需求。
​

比如一个系统，需要用户登陆以后才能使用，对于传统的前后端未分离的情况，我们一般的处理方式是，当检测到用户未登录的时候，一般会重定向到登录页面，让用户进行登录。
​

但是对于前后端分离的情况，前端工程师一般倾向于单页面的处理模式，而想要处理这种情况的话，我们一般传统的做法是，会选择采用 location.search 的方式，即通过参数来判断。
​

比如检测到用户没登陆，我们会刷新页面，自动在地址后面加上诸如 ?page=login 等形式的参数，然后我们的系统初始化的时候，会检测 location.search 中是否存在这个参数，如果存在，页面上显示的就是登录有关的内容。
​

但是这种处理方式写起来太过复杂，而前端比较流行的框架 vue、react 等给了我们比较好的解决方案。
​

那就是采用 vue-router 或者 react-router 这种解决方案，一般会有两种模式，history 模式和 hash 模式，两种模式对于开发来说，没有任何的区别。
​

history、hash 模式区别

​

这里主要不是想介绍前端 router 的相关内容的，这里就一笔带过，不做过多的赘述了。
​

我们知道的是，history 模式，是基于 html5 提供的 history api 来实现的。
​

对于 react router 来说，它的作用是这样的：
​

Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。

而一般所谓的 hash 模式，就是通过来监听 hash 的变化，来改变页面的视图的。
​

对于 react router 来说，他的作用是这样的：
​

Hash history 使用 URL 中的 hash（#）部分去创建形如example.com/#/some/path的路由。

到这里，我想以前不了解的童鞋应该会明白了，这篇文章想要表达的内容到底是什么了。
​

我们打包以后，采用 hash 的前端路由项目，扔在任何服务器里面，是不会存在找不到资源的情况，因为页面的入口始终都是 example.com/rootpath/ 其他资源都是根据这个路径来索引的。
​

但是对于 history 方式的前端路由项目，打包了以后，扔在各种静态资源服务器中，是没有办法正常使用的。
​

刨根问底

​

你如果之前有类似的经历，那么你肯定上网找过解决方案。网上一找，会有很多教你怎么配置的“攻略”，但是都是流于表面，根本不告诉你为什么这么用，这么用的原理是什么，这么用究竟是要解决什么问题。
​

弄懂了原理，我们才能对症下药，才能在任何静态资源服务器中都能舒服的使用我们的 history 路由。
​

首先，我们来探求，为什么找不到资源的原因。
​

因为我们一般都是打包以后放在静态资源服务器中的，我们访问诸如 example.com/rootpath/ 这种形式的资源没问题，是因为，index.html 文件是真实的存在于 rootpath 文件夹中的，可以找到的，返回给前端的。
​

但是如果访问子路由 example.com/rootpath/login 进行登录操作，但是 login/index.html 文件并非真实存在的文件，其实我们需要的文件还是 rootpath 目录中的 index.html 。
​

再者，如果我们需要 js 文件，比如登陆的时候请求的地址是 example.com/rootpath/login/js/dist.js 其实我们想要的文件，还是 rootpath/js/ 目录中的 dist.js 文件而已。
​

前端路由其实是一种假象，只是用来蒙蔽使用者而已的，无论用什么路由，访问的都是同一套静态资源。
​

之所以展示的内容不同，只是因为代码里，根据不同的路由，对要显示的视图做了处理而已。
​

我相信，说到这里，聪明的童鞋，应该就想明白了，我们该怎么做，才能做到 history 模式的前端路由打包以后照样能用了。
​

那就是，一旦匹配子路径，发现 404 了，直接将路径中的子目录移除掉，返回根目录种对应的文件即可。
​

这么说，可能有点拗口，举几个例子，可能就比较好理解了。

比如要找 example.com/rootpath/login 静态资源服务器找不到，那就返回 example.com/rootpath/ 内容；要找 example.com/rootpath/login/css/style.css 找不到，那就照着 example.com/rootpath/css/style.css 这个路径去找。
​

总之就是，请求的是子目录，找不到，那就返回根目录一级对应的资源文件就好了。
​

理是这个理，但是该如何配置呢？
​

别急，接下来，就将几种常见的情况下，该如何配置，保证 history 前端路由也能正常使用。

在 nginx 中使用

如果你打包以后的前端静态资源文件，想要仍在 nginx 中使用，那首先将你打包好的静态资源目录扔进 www 目录，比如你打包好的资源的目录叫 rootpath ，那么直接将 rootpath 整个目录丢进 www 目录即可。
​

然后打开我们的 nginx 配置文件 nginx.conf，插入以下配置：

location /rootpath/ {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /rootpath/index.html;
}

​

这样就能保证我们的前端路由能够正常的访问了

如果要放在根目录用，直接将配置中的 /rootpath 相关字段从配置中去掉即可。

在 tomcat 中使用

如果在 window 中使用，可以直接下载二进制安装包，解压以后，一般直接就能使用。
​

一般我们将我们的静态资源放在 webapps 文件夹中。
​

要想达到和上面 nginx 中一样的效果，首先同样是将 rootpath 文件夹放进 webapps 中。
​

然后在 webapps/rootpath 中新建 WEB-INF 文件夹，文件夹里新建一个 web.xml 文件。
​

文件中内容配置如下即可：

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>your_display_name</display-name>

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

</web-app>

配置好以后，重启 tomcat，会得到如上图同样的效果。
​

总结反思

其实，很多时候，碰到的问题，多查资料，深究其原理，明白了原理以后，就能找到合适的解决方案。
​

如果只是机械式地照搬，碰运气式的尝试，往往会南辕北辙，很难找到满意的解决方案。

参考资料

1. http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html
2. https://www.learninjava.com/react-router-apache-nginx-tomcat/
3. https://stackoverflow.com/questions/41246261/react-routing-is-able-to-handle-different-url-path-but-tomcat-returns-404-not-av/50460867#50460867