标签：前端 rootpath 详解 com example 路由 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

标签：前端,rootpath,详解,com,example,路由,history
来源： https://blog.csdn.net/lovefengruoqing/article/details/117024141

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。