Vue部署在Nginx上，不能F5刷新；Nginx僞靜態，try_files和rewrite配置詳解

Vue部署在Nginx上，不能F5刷新的問題

配置示例（Windows版Nginx）

server {
    listen       80;
    server_name  47.104.**.**;

    location / {
        root   C:\flying_project\flyingProject\fcadmin-vue;
        #重點配置
        try_files $uri $uri/ @router;
        index  index.html index.htm;
    }
    #重點配置
    location @router {
        rewrite ^.*$ /index.html last;
    }

    location /fcadmin/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://fcadmin;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }    
}

	upstream fcadmin  {
		server 127.0.0.1:5188;
	}

重點配置詳解：

try_files $uri $uri/ @aaaaab；（＠表示配置文件中預定義標記點)）

try_files從字面上理解就是嘗試文件，再結合環境理解就是“嘗試讀取文件”，那他想讀取什麼文件呢？
讀取靜態文件

$uri 這個是nginx的一個變量，存放着用戶訪問的地址。
比如：http://www.xxx.com/index.html, 那麼$uri就是 /index.html

$uri/ 代表訪問的是一個目錄，
比如：http://www.xxx.com/hello/test/ ，那麼$uri/就是 /hello/test/

完整的解釋就是：try_files 去嘗試到網站目錄讀取用戶訪問的文件，如果第一個變量存在，就直接返回；
不存在繼續讀取第二個變量，如果存在，直接返回；不存在直接跳轉到第三個參數上。

比如用戶訪問這個網地址：http://www.xxx.com/test.html
try_files首先會判斷出他是文件，還是一個目錄，結果發現他是文件，與第一個參數 $uri變量匹配。
然後去到網站目錄下去查找test.html文件是否存在，如果存在直接讀取返回。如果不存在直接跳轉到第三個參數，而第三個參數是一個location,而這個location裏面配置的就是rewrite規則。

try_files也可以最後是重定向到一個地址：try_files $uri $uri/ /index.php;

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

當用戶請求 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。

rewrite 語法格式：

rewrite     [regex]          [replacement]      [flag];
            url正則表達式     替換成真實url       標記（last,break）
            
location @router {
    rewrite ^.*$ /index.html last;
    #     匹配所有	/index.html last;
}

flag 支持以下 4 個選項：

last：停止處理當前的 ngx_http_rewrite_module 指令集，並開始對匹配更改後的 URI 的新 location 進行搜索（再從 server 走一遍匹配流程）。此時對於當前 server 或 location 上下文，不再處理 ngx_http_rewrite_module 重寫模塊的指令。
break：停止處理當前的 ngx_http_rewrite_module 指令集
redirect：返回包含 302 代碼的臨時重定向，在替換字符串不以“http://”，“https://”或“$scheme”開頭時使用
permanent：返回包含 301 代碼的永久重定向。
last 和 break 的區別及共同處：

last 重寫 url 後，會再從 server 走一遍匹配流程，而 break 終止重寫後的匹配
break 和 last 都能阻止後面的 rewrite 指令再次執行