參照官網的文檔:http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
Nginx的配置語法靈活,可控制度非常高。
在0.7以後的版本中加入了一個try_files指令,配合命名location,可以部分替代原本常用的rewrite配置方式,提高解析效率。
1、try_files指令介紹
語法:try_files file ... uri(格式1) 或 try_files file ... = code(格式2)
默認值:無
作用域:server location
解釋說明:
- 按指定的file順序查找存在的文件,並使用第一個找到的文件進行請求處理;
- 查找路徑是按照給定的root或alias爲根路徑來查找的;
- 如果給出的file都沒有匹配到,則會進行一個內部重定向到最後一個參數給定的uri,就是新的location匹配;
- 只有最後一個參數可以引起一個內部重定向,之前的參數只設置內部URI的指向;
- 最後一個參數是回退URI且必須存在,否則會出現內部500錯誤;
- 如果是(格式2),若最後一個參數是 = 404 ,若給出的file都沒有匹配到,則最後返回404的響應碼。
2、舉例說明
例1:
- root 後面的參數是前端vue項目貸嗎安裝目錄;
- try_files 負責掃描內部目錄然後再進行內部重定向;
- expires 是nginx控制緩存的一種方式,7d=7天。
location / {
root /home/nx/dist;
try_files $uri $uri/ /index.php?$query_string
expires 7d;
}
當用戶請求 http://localhost/example
時,這裏的 $uri
就是 /example
,try_files 會到硬盤裏嘗試找這個文件;
如果存在名爲 /$root/example
(其中 $root
是項目代碼安裝目錄)的文件,就直接把這個文件的內容發送給用戶;
顯然,目錄中沒有叫 example
的文件;
然後就看 $uri/
,增加了一個 /
,也就是看有沒有名爲 /$root/example/
的目錄;
又找不到,就會 fall back 到 try_files 的最後一個選項 /index.php
,發起一個內部 “子請求”,也就是相當於 nginx 發起一個 HTTP 請求到 http://localhost/index.php
。
例2:
location / {
try_files /app/cache/ $uri @fallback;
index index.php index.html;
}location @fallback {
rewrite ^/(.*)$ http://www.baidu.com # 跳轉到百度
}
它將檢測$document_root/app/cache/index.php,$document_root/app/cache/index.html 和 $document_root$uri是否存在,如果不存在着內部重定向到 @fallback。
@表示配置文件中預定義標記點,如上所示(@fallback)。
你也可以使用一個文件或者狀態碼(=404)作爲最後一個參數,如果是最後一個參數是文件,那麼這個文件必須存在。
3、我遇到的問題
小編通過nginx啓動vue以後,我們在訪問頁面的時候只能訪問默認頁面和通過項目內跳轉其他頁面,如果刷新就會404。如圖:
關於單頁面,刷新404問題,如vue + nginx的配置, vue路由必須先加載 index.html 或者XX.js 才能識別到路由,故直接刷新頁面會出現404。
這時候最好到做法,是使用try_files 進行嘗試,如果獲取不到資源,加載index.html 再利用 rewrite的 last參數,保持路由路徑不變,從而實現刷新頁面。
但需要注意:此種解決方法需要 vue和nginx部署在同一臺服務器上,這樣try_files才能在服務器硬盤上找到index.html文件。
原來的nginx配置:
location / {
root /home/vue/dist;
index index.html index.htm index.jsp;
}
修改後的nginx配置:
將默認的index註釋掉,換成了try_files,它會去掃描內部目錄然後再進行內部重定向,規則上面介紹過了。
location / {
root /home/nx/dist;
#index index.html index.htm index.jsp;
try_files $uri $uri/ /index.html;
expires 7d;
}
少俠請留步 ... ヾ(◍°∇°◍)ノ゙ ...
歡迎點贊、評論、加關注,讓更多人看到學到賺到
更多精彩,請關注我的"今日頭條號":Java雲筆記