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. 其检查的路径是按rootalias配置的。
  3. 可以通过配置/来匹配目录下的文件。
  4. 没有找到则会重定向到最后一个参数中指定的uri中,比如说新的location中的内容。
location /images/ {
    try_files $uri /images/default.gif;
}

location = /images/default.gif {
    expires 30s;
}
  1. 如果是格式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详解
posted @ 2021-05-06 22:34  会飞的一棵树  阅读(357)  评论(0编辑  收藏  举报