您的位置:

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指令时,经常可能会遇到一些问题,下面列出一些可能的坑:

  • try_files指令只with-try-files可能使用once或multiple参数值
  • 使用`/`因为会使Nginx子请求开销很高,因此需要使用if或map模块
  • 不要使用try_files指令处理PHP或Fastcgi应用程序,因为这会导致PHP/Fastcgi subprocess的开销

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