Niginx中Vue Router 历史（history）模式的配置

快速配置

将build后的文件直接丢到niginx目录下的html文件夹中，然后配置nginx.conf,就可以在快速的实现niginxhistory模式的配置了。

location /{
    # 可使用 root 指定路径
    # root D:/dist;
    try_files $uri $uri/ /index.html;
}

原理解析

try_files

try_files是nginx中http_core核心模块所带的指令。有两种格式：

try_files file ... uri;
try_files file ... =code;

使用指令会：

1. 按照指定的顺序去匹配文件，并返回第一个匹配作为响应。
2. 其检查的路径是按root或alias配置的。
3. 可以通过配置/来匹配目录下的文件。
4. 没有找到则会重定向到最后一个参数中指定的uri中，比如说新的location中的内容。

location /images/ {
    try_files $uri /images/default.gif;
}

location = /images/default.gif {
    expires 30s;
}

5. 如果是格式2，如果最后一个参数是 = 404 ，若给出的file都没有匹配到，则最后返回404的响应码。

$uri

http {
    include       mime.types;
    default_type  application/octet-stream;
	
    # 配置输出的log
    log_format  main  '$uri --- $request_uri -- $remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;

访问了三次不同的路径

1. http://127.0.0.1:8023/index
2. http://127.0.0.1:8023/img/flytree.jpg
3. http://127.0.0.1:8023/mobile
4. http://127.0.0.1:8023/test

日志如下：

/index.html --- /index -- 127.0.0.1 - - [07/Jul/2021:23:00:06 +0800] "GET /index HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/img/flytree.jpg --- /img/flytree.jpg -- 127.0.0.1 - - [07/Jul/2021:23:02:25 +0800] "GET /img/flytree.jpg HTTP/1.1" 200 32273 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/index.html --- /mobile -- 127.0.0.1 - - [07/Jul/2021:23:03:03 +0800] "GET /mobile HTTP/1.1" 200 1232 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/test --- /test -- 127.0.0.1 - - [07/Jul/2021:23:08:34 +0800] "GET /test HTTP/1.1" 301 169 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"
/test/index.html --- /test/ -- 127.0.0.1 - - [07/Jul/2021:23:08:34 +0800] "GET /test/ HTTP/1.1" 200 9 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64" "-"

可以看出$uri是要访问的文件名,就是访问地址路径后面的内容，如果没有具体文件，就会去index.html。

若是如下配置：

location /images/ {
    root D:/dist;
    try_files $uri   $uri/  /public/flytree.jpg;
}

若请求http://127.0.0.1:8023/cc.jpg,没有cc.jpg有/public/flytree.jpg的情况下，则顺序去匹配:

1. D:/dist/cc.jpg 无则
2. D:/dist/cc.jpg/index.html 无则
3. D:/dist/public/flytree.jpg
   所以最后会看到flytree.jpg的图片。

niginx补充

基本使用命令

1. 开启：
   在nginx目录下使用start nginx命令，或双击程序打开。
2. 停止：
   在nginx目录下使用nginx.exe -s stop命令快速停止，nginx.exe -s quit退出。
3. 重启：
   在nginx目录下使用nginx.exe -s reload命令重启。

相关链接：

1. HTML5 History 模式
2. nginx配置选项try_files详解