Try_files指令详解

一、try_files vue

在vue环境下，try_files用于定义Nginx文件系统中查找请求的文件路径和文件类型的优先顺序。

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

以上代码的意思是，优先查找请求的文件，如果找不到则查找以请求文件名为前缀的目录，最后如果仍然找不到则使用index.html文件作为返回。

Vue cli提供了使用history模式的路由方法，在生产环境中需要配置Nginx才能够使用。具体方法是在Nginx中使用try_files指令。

二、try_files $uri

如果条件比较简单，只是需要返回一个相同的文件，可以使用try_files $uri $uri/代替if语句。

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

以上代码表示查找请求的文件，如果找不到则查找以请求文件名为前缀的目录，如果仍然找不到则使用index.html文件作为返回。

三、try_files 过滤

使用try_files指令进行过滤文件。将所有文件通过正则表达式过滤，只在目录下查找.html、.css、.js后缀的文件。如果匹配不到则使用index.html。

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

以下的代码表示只在目录下查找.html、.css、.js后缀的文件，如果匹配不到则使用index.html。

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

四、try_files react

在React环境下，使用try_files指令来配置Nginx服务器，以实现SPA应用程序的路由管理。

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

以上代码意思是，在请求的URL中查找与Nginx服务器中存在的URL匹配的配置文件，如果不存在则从/index.html中返回。这是SPA应用程序的典型配置。

五、try_files 坑

在使用try_files指令时，经常可能会遇到一些问题，下面列出一些可能的坑：

由于Nginx有很多的if语句，但是if过于复杂或嵌套太多，否则会降低性能。