一直用hash模式，代理配置如下，一直没问题，始终没有弄清楚path后面加"/"与否的区别，今天好好梳理一下：

server { 
    # 服务器端口
    listen       80;
    # 服务器名称
    server_name  localhost;
    # 路径配置
    location / {
        # 相对路径配置，基于nginx启动的位置
        root   dist;
        index  index.html;
    }
    # 后端接口，反向代理  
    location ~ /rest {
       #  反向代理
       proxy_pass http://ip:port;
    }

 }

History模式这样不灵了，需要注意两点：

1、try_files $uri $uri/  /index.html;  #防止刷新出现404错误

2、加不加 "/" 结尾

server { 
    # 服务器端口
    listen       80;
    # 服务器名称
    server_name  localhost;
    # 路径配置
    location / {
        # 相对路径配置，基于nginx启动的位置
        root   dist;
        index  index.html;
        # 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        # Nginx知识补充：try_files 指令：
        # try_files $uri $uri/  /index.html;
        # 作用域：server location
        # 语法：try_files file ... uri 或 try_files file ... = code
        # 其作用是按顺序检查本地（服务器）文件是否存在，
        # 返回第一个找到的文件或文件夹（结尾加斜线表示为文件夹），
        # 如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
        # 需要注意的是，只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。
        # 最后一个参数是回退URI且必须存在，否则会出现内部500错误。命名的location也可以使用在最后一个参数中。
        # 与rewrite指令不同，如果回退URI不是命名的location那么args不会自动保留，如果你想保留args，则必须明确声明。
        # 但是官方的demo是有一些需要注意的地方的。
        try_files $uri $uri/ @router;  
    }

    # 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
    # 因此需要rewrite到index.html中，然后交给路由在处理请求资源
    location @router {
        # last ：相当于Apache里(L)标记，【表示完成rewrite ！important】【将得到的路径重新进行一次路径匹配】，浏览器地址栏【URL地址不变】
        # break；本条规则匹配完成后，【终止匹配  ！important】，【不再匹配后面的规则】，浏览器地址栏【URL地址不变】 一般不用这个选项！
        # redirect： 返回302临时重定向，浏览器地址【会显示跳转后的URL地址】
        # permanent：返回301永久重定向，浏览器地址栏【会显示跳转后的URL地址】
        # 1.静态资源，去掉项目名，进行定向 \为转义， nginx 中的 / 不代表正则，所以不需要转义
        rewrite (static/.*)$ /$1   redirect;
        # 2.非静态资源，直接定向index.html
        rewrite ^.*$   /index.html  last;
     }

     # 后端接口，反向代理，注意这里要加"/"结尾  
     location /rest/ {
        #  反向代理
        proxy_pass http://ip:port/;

     }

 }

配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。


--------看看下面几种情况：分别用​​ ​http://192.168.1.23/proxy/index.html​​​进行访问测试--------

为了方便测试，先在另一台机器192.168.1.5上部署一个8090端口的nginx，配置如下：测试访问（103.110.186.5是192.168.1.5的外网ip）：

[root@bastion-IDC ~]# curl http://192.168.1.5:8090
this is 192.168.1.5

192.168.1.23作为nginx反向代理机器，path带“/”情况说明如下：

1）第一种情况：

server {
  listen 80;
  server_name localhost;
  location / {
    root /var/www/html;
    index index.html;
  }

  location  /proxy/ {
            proxy_pass http://192.168.1.5:8090/;
  }
}

匹配结果为：http://192.168.1.23/proxy/  -----> http://192.168.1.5:8090/

注意，终端里如果访问http://192.168.1.23/proxy（即后面不带"/"），则会访问失败！因为proxy_pass配置的url后面加了"/"

2）第二种情况，proxy_pass配置的url后面不加"/"

server {
  listen 80;
  server_name localhost;
  location / {
    root /var/www/html;
    index index.html;
  }

  location  /proxy/ {
            proxy_pass http://192.168.1.5:8090;
  }
}

匹配结果为：http://192.168.1.23/proxy/ ------> http://192.168.1.5:8090/proxy/

3）第三种情况 

server {
listen 80;
server_name localhost;
location / {
    root /var/www/html;
    index index.html;
}

location  /proxy/ {
        proxy_pass http://192.168.1.5:8090/haha/;
    }
}

匹配结果：http://103.110.186.23/proxy/ -----> http://192.168.1.5:8090/haha/

4）第四种情况：相对于第三种配置的url不加"/" 

server {
listen 80;
server_name localhost;
location / {
    root /var/www/html;
    index index.html;
}

location  /proxy/ {
    proxy_pass http://192.168.1.5:8090/haha;
    }
}

匹配结果：http://192.168.1.23/proxy/index.html -----> http://192.168.1.5:8090/hahaindex.html
同理，http://192.168.1.23/proxy/test.html -----> http://192.168.1.5:8090/hahatest.html

[root@localhost conf.d]# curl http://192.168.1.23/proxy/index.html
192.168.1.5   hahaindex.html

注意，这种情况下，不能直接访问http://192.168.1.23/proxy/，后面就算是默认的index.html文件也要跟上，否则访问失败！

上面四种方式都是匹配的path路径后面加"/"，下面说下path路径后面不带"/"的情况：

1）第一种情况，proxy_pass后面url带"/"：

server {
listen 80;
server_name localhost;
location / {
    root /var/www/html;
    index index.html;
}

location  /proxy {
    proxy_pass http://192.168.1.5:8090/;
    }
}

访问http://103.110.186.23/proxy会自动加上"/”（即变成http://103.110.186.23/proxy/），匹配关系为：http://103.110.186.23/proxy/ -----> http://192.168.1.5:8090/

2）第二种情况，proxy_pass后面url不带"/" 

server {
listen 80;
server_name localhost;
location / {
    root /var/www/html;
    index index.html;
}

location  /proxy {
    proxy_pass http://192.168.1.5:8090;
}
}

这样配置的话，访问http://103.110.186.23/proxy会自动加上"/”，匹配关系为：http://103.110.186.23/proxy/ -----> http://192.168.1.5:8090/proxy/

3）第三种情况 

server {
listen 80;
server_name localhost;
location / {
    root /var/www/html;
    index index.html;
}

location  /proxy {
    proxy_pass http://192.168.1.5:8090/haha/;
    }
}

匹配关系为：http://103.110.186.23/proxy/ -----> http://192.168.1.5:8090/haha/

4）第四种情况：相对于第三种配置的url不加"/" 

server {
listen 80;
server_name localhost;
location / {
    root /var/www/html;
    index index.html;
}

location  /proxy {
    proxy_pass http://192.168.1.5:8090/haha;
    }
}

匹配关系为：http://103.110.186.23/proxy ----> http://192.168.1.5:8090/haha/

# vue.js # nginx # 服务器
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue