一、try_files vue

在vue環(huán)境下，try_files用于定義Nginx文件系統(tǒng)中查找請(qǐng)求的文件路徑和文件類型的優(yōu)先順序。

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

以上代碼的意思是，優(yōu)先查找請(qǐng)求的文件，如果找不到則查找以請(qǐng)求文件名為前綴的目錄，最后如果仍然找不到則使用index.html文件作為返回。

Vue cli提供了使用history模式的路由方法，在生產(chǎn)環(huán)境中需要配置Nginx才能夠使用。具體方法是在Nginx中使用try_files指令。

二、try_files $uri

如果條件比較簡單，只是需要返回一個(gè)相同的文件，可以使用try_files $uri $uri/代替if語句。

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

以上代碼表示查找請(qǐng)求的文件，如果找不到則查找以請(qǐng)求文件名為前綴的目錄，如果仍然找不到則使用index.html文件作為返回。

三、try_files 過濾

使用try_files指令進(jìn)行過濾文件。將所有文件通過正則表達(dá)式過濾，只在目錄下查找.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環(huán)境下，使用try_files指令來配置Nginx服務(wù)器，以實(shí)現(xiàn)SPA應(yīng)用程序的路由管理。

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

以上代碼意思是，在請(qǐng)求的URL中查找與Nginx服務(wù)器中存在的URL匹配的配置文件，如果不存在則從/index.html中返回。這是SPA應(yīng)用程序的典型配置。

五、try_files 坑

在使用try_files指令時(shí)，經(jīng)常可能會(huì)遇到一些問題，下面列出一些可能的坑：

由于Nginx有很多的if語句，但是if過于復(fù)雜或嵌套太多，否則會(huì)降低性能。