history路由Nginx配置

发表于

使用History路由时，需要对Nginx进行相关配置。

  目前前端路由主要分为两种实现，hash或history来实现，vue-router默认使用hash模式，
这种模式在url中会加入#，浏览器识别到这个之后是不会跳转页面的。react-router默认使用history模式，
这种路由的url地址跟平常我们看到的url是一样的，当然这两个模式都可以切换。

  使用history模式开发的时候一般不会出现问题，因为在脚手架或者webpack中已经配置好了，但是如果打包上线的话，进入首页一般
没有问题，点击跳转路由也没有问题，但是一旦刷新，或者直接进入某个路由就会出现404，这是因为url直接请求了资源地址，但是我们的页面是需要通过
入口文件index.html加载js来实现前端路由的，所以需要配置Nginx

1
2
3
4
5
6
7
8
9
10
server {
  listen 80;
  server_name test.test.cn;
  root /home/html/test;
  index index.html index.htm;

  location / {
        try_files $uri $uri/ /index.html;
  }
}

其实原理就是请求其他地址的时候全部转到入口文件index.html，从而实现进入前端路由中。

  上面这种情况是我们的应用就在域名的根目录下，如果我们的应用没有在根目录下例如 http://test.test.com/test/
这就需要指定路径，Nginx指定文件路径的方式有两种，分别是root和alias，两者的区别主要在于Nginx如何解释location后面的uri,这会使两者分别以不同的方式将请求映射到服务器文件上。

root示例：

1
2
3
4
5
location /web/ {
  root /home/html/dev/;
  index index.html;
  try_files $uri /web/test/index.html;
}

如果请求的路由是/web/test，那么将返回服务器上的/home/html/dev/web/test，root会将location后面匹配到的内容家到路径上。

alias示例：

1
2
3
4
5
location /web/ {
  alias /home/html/dev/;
  index index.html;
  try_files $uri /web/test/index.html;
}

如果请求的路由是/web/test，那么将返回服务器上的/home/html/dev/test，alias会把location后面匹配的路径丢弃掉，把当前匹配到的目录指向到指定的目录。

注意：

  1. 使用alias时，目录名后面一定要加”/“。
  2. alias在使用正则匹配时，必须捕捉要匹配的内容并在指定的内容处使用。
  3. alias只能位于location块中。（root可以不放在location中）

在使用非路径匹配的时候，还需要在前端路由配置相关的base路径。