zoukankan      html  css  js  c++  java
  • 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详解
  • 相关阅读:
    断点下载
    根据显示的字符多少来做Label的自适应高度
    iOS中POST异步请求
    iOS中两个APP之间的跳转和通信
    cocoapod [!] /usr/bin/curl -f -L -o /var/folders/dj/yccslvys6tb53k2vz87djfsh0000gn/T/d20170219-12508-z77a4l/file.zip https://github.com/kylefleming/opencv/releases/download/3.1.0-ios-fix/opencv2.fram
    使用webview加载html图片、表单超屏幕问题
    uiwebview 加载html时字体变小 加载前或加载后改变字体大小
    uitabbarController tababr 上方横线隐藏
    uinavigationcontroller uinavigationbar 下方横线去除
    贝赛尔曲线 绘制园
  • 原文地址:https://www.cnblogs.com/flytree/p/14979343.html
Copyright © 2011-2022 走看看