nginx与vue路由

nginx代理方式

server {

listen 80;

server_name localhost;

location /order/{ 

    proxy_pass http://localhost:8080/order 
    
}

表示监听80端口，将请求反向代理到后端服务器。

例如：当浏览器请求的路径是 localhost:80/order/get，检测到请求路径里的/order/的时候proxy_pass将代替这个标识符之前（包括标识符）的内容。也就是说访问的是 localhost:8080/order/get。

  location后边的字段拦截的是公用前缀。在这里后端接口为/order/get，proxy_pass为http://localhost:8080/order ，如果后台接口为/get，那么proxy_pass为http://localhost:8080。

 

---

后端接口：
/api/order/get
/api/order/test

后端端口号：localhost:8080

nginx该怎么配？

 ==>

location api/order/ {
        proxy_pass    http://localhost:8080/api/order/

}

浏览器输入 localhost:80/api/order/get

想让它转到 localhost:8080/order/get

nginx该怎么配？

 ==>

location api/order/ {
        proxy_pass    http://localhost:8080/order/

}

或者

location api/ {
        proxy_pass    http://localhost:8080

}

具体使用哪种取决于业务场景。

VUE代理方式

server: {
      port: 3333,
      /** 接口代理 */
      proxy: {
        "/sign-system": {
          target: "http://localhost:8080/sign-system",
          rewrite: (path) => path.replace("/sign-system", "")
        }
      }
    }

表示监听3333端口，将请求反向代理到后端服务器。

例如：当浏览器请求的路径是 localhost:3333/sign-system/sign，检测到请求路径里的/sign-system/的时候，将这个标识符及后边内容 (/sign-system/sign) 一起追加到target内容后边。则这里访问到的是 localhost:8080/sign-system/sign-system/sign。

replace("/sign-system", "") 将 /sign-system 转为空格，也就是访问路径变成了 localhost:8080/sign-system/sign。      注意：replace内替换的 /sign-system 是浏览器请求路径中的/sign-system。

总结

vue代理方式在不加 replace("/sign-system", "") 的时候，是将标识符追加到target后边；当加 replace("/sign-system", "") 语句后，原理则与nginx方式相同。