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

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

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

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

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

那就是采用 vue-router 或者 react-router 这种解决方案，一般会有两种模式，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 中使用，那首先将你打包好的静态资源目录扔进 www 目录，比如你打包好的资源的目录叫 rootpath ，那么直接将 rootpath 整个目录丢进 www 目录即可。 ​

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

​

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

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

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

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

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

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

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

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

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

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