Vue和nginx路由的转换

目录

1.nginx是替换之后再拼接起来，vue是直接将其拼接起来

2.nginx路由转换

3.vue路由转换

---

1.nginx是替换之后再拼接起来，vue是直接将其拼接起来

2.nginx路由转换

        location /api/ {

                proxy_pass http://localhost:8080/

                }

如果说想访问 http:/10.0.0.2:8080/order，只能通过访问nginx：10.0.0.1:80/order,然后nginx去代理过去

例：

localhost:80/api/order/get ----->localhost:8080/order/get

localhost:80/api/test/get ----->localhost:8088/test/get

3.vue路由转换

"/sign-system": {

        target: "http://127.0.0.1:8080/sign-system",

        ws: true,

        /** 是否允许跨域 */

        changeOrigin: true,

        rewrite: (path) => path.replace("sign-system", "")

}

sign-system开头的，会进到上面这个路由里面，然后会将sign-system/sign ，给拼接到target后面，而不是说只将/sign ，拼接到target后面

rewrite的作用，就是将sign-system/sign 中的sign-system，替换成空格，来达到只将/sign ，拼接到target后面的目的。

例：

http://localhost:3333/sign-system/sign ---->http://127.0.0.1:8080/sign-system/sign-system/sign