一、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过于复杂或嵌套太多,否则会降低性能。