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   ;
    }
    #重点配置
    location @router {
        rewrite ^.*$ / last;
    }

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

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

	upstream fcadmin  {
		server 127.0.0.1:5188;
	}

重点配置详解：

try_files $uri $uri/ @aaaaab；（＠表示配置文件中预定义标记点)）

try_files从字面上理解就是尝试文件，再结合环境理解就是“尝试读取文件”，那他想读取什么文件呢？
读取静态文件

$uri 这个是nginx的一个变量，存放着用户访问的地址。
比如：/, 那么$uri就是 /

$uri/ 代表访问的是一个目录，
比如：/hello/test/ ，那么$uri/就是 /hello/test/

完整的解释就是：try_files 去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；
不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。

比如用户访问这个网地址：/
try_files首先会判断出他是文件，还是一个目录，结果发现他是文件，与第一个参数 $uri变量匹配。
然后去到网站目录下去查找文件是否存在，如果存在直接读取返回。如果不存在直接跳转到第三个参数，而第三个参数是一个location,而这个location里面配置的就是rewrite规则。

try_files也可以最后是重定向到一个地址：try_files $uri $uri/ /;

location / {
    try_files $uri $uri/ /?$query_string;
}

当用户请求 http://localhost/example 时，这里的 $uri 就是 /example。
try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example（其中 $root 是项目代码安装目录）的文件，就直接把这个文件的内容发送给用户。
显然，目录中没有叫 example 的文件。然后就看 $uri/，增加了一个 /，也就是看有没有名为 /$root/example/ 的目录。
又找不到，就会 fall back 到 try_files 的最后一个选项 /，发起一个内部 “子请求”，也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/。

rewrite 语法格式：

rewrite     [regex]          [replacement]      [flag];
            url正则表达式     替换成真实url       标记（last,break）
            
location @router {
    rewrite ^.*$ / last;
    #     匹配所有	/ 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 指令再次执行

秒客网