Shulou(Shulou.com)06/01 Report--

This article mainly introduces the use of vue project configuration of multiple agents to pay attention to the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that after reading this article using vue project configuration of multiple agents to pay attention to which points the article will have a harvest, let's take a look at it.

During the development of a Vue project, for the convenience of local debugging, we usually configure devServer in vue.config.js to start a server locally. In this option, we configure the proxy property to proxy local requests (for example: / api/action) to the back-end development server (e.g. http://xxx.xxx.xxx/api/action).

DevServer: {port: 8081, proxy: {"/ api/action": {target: "http://192.168.200.106:81", changeOrigin: true, ws: true, secure: false}, ``in this configuration, you should pay attention to the following two points:

When the interface address has an overlapping address, put the one with low matching degree at the back.

For example:

* match / to 192.191.1.1

* match / api to 192.191.1.2

* match / api/action to 192.191.1.3

If we write as follows:

Proxy: {"/": {target: "http://192.191.1.1", changeOrigin: true, ws: true, secure: false}," / api ": {target:" http://192.191.1.2", changeOrigin: true Ws: true, secure: false}, "/ api/action": {target: "http://192.191.1.3", changeOrigin: true, ws: true, secure: false}}

Then all requests to /, / api and / api/action will be proxied to 192.191.1.1.

The reason is that the matching here is actually a regular matching process. When we request / api, we first read the first one in the configuration item, take the / api in the configuration to match the / api in the request, and find that the requested / api contains the configuration item /. The matching is successful, and the request is directly proxied to 192.191.1.1, and the matching of / api/action is the same.

In other words, its matching rule is to match the address in the request with the address in the configuration item. If the address in the request contains the address in the configuration, the match is successful, otherwise, the next configuration item is taken to continue the match.

Therefore, the fewer characters that match the address in the configuration and the request address, the lower the match. In the example above, only one character of the address (/) in the configuration matches the request address (/ api), so the matching degree is low.

So the correct way to write it should be:

Proxy: {"/ api/action": {target: "http://192.191.1.3", changeOrigin: true, ws: true, secure: false}," / api ": {target:" http://192.191.1.2", ChangeOrigin: true, ws: true, secure: false}, "/": {target: "http://192.191.1.1", changeOrigin: true, ws: true, secure: false}

In this way, requests to the three addresses can be correctly represented to the corresponding address.

When multiple addresses represent the same target, you can merge.

In practical applications, because the back-end uses the micro-service mode of development, we may proxy different services to different addresses during the development phase. When there are many services, the number of our agents will be large:

Proxy: {"/ api/action": {target: "http://192.191.1.3", changeOrigin: true, ws: true, secure: false}," / api/action2 ": {target:" http://192.191.1.4", ChangeOrigin: true, ws: true, secure: false}, "/ api/action3": {target: "http://192.191.1.3", changeOrigin: true, ws: true, secure: false} "/ api/action4": {target: "http://192.191.1.4", changeOrigin: true, ws: true, secure: false}," / api/action5 ": {target:" http://192.191.1.5", ChangeOrigin: true, ws: true, secure: false}, "/ api/action6": {target: "http://192.191.1.6", changeOrigin: true, ws: true, secure: false} "/ api/action7": {target: "http://192.191.1.5", changeOrigin: true, ws: true, secure: false}," / api/action8 ": {target:" http://192.191.1.6", ChangeOrigin: true, ws: true, secure: false}, "/ api/action9": {target: "http://192.191.1.7", changeOrigin: true, ws: true, secure: false} "/ api": {target: "http://192.191.1.2", changeOrigin: true, ws: true, secure: false}," / ": {target:" http://192.191.1.1", ChangeOrigin: true, ws: true, secure: false},}

When the number of agents configured exceeds ten, the development environment reports the following error when compiling and packaging:

To solve the problem of reporting errors and reduce the size of the code, we can merge configuration items with the same target. As we know above, this is actually a regular matching process, so we can merge them using regular syntax:

Proxy: {"/ api/action | / api/action3": {target: "http://192.191.1.3", changeOrigin: true, ws: true, secure: false} "/ api/action2 | / api/action4": {target: "http://192.191.1.4", changeOrigin: true, ws: true, secure: false} "/ api/action5 | / api/action7": {target: "http://192.191.1.5", changeOrigin: true, ws: true, secure: false} "/ api/action6 | / api/action8": {target: "http://192.191.1.6", changeOrigin: true, ws: true, secure: false}," / api/action9 ": {target:" http://192.191.1.7", ChangeOrigin: true, ws: true, secure: false}, "/ api": {target: "http://192.191.1.2", changeOrigin: true, ws: true, secure: false} "/": {target: "http://192.191.1.1", changeOrigin: true, ws: true, secure: false} } this is the end of the article on "what points to pay attention to when configuring multiple agents using a vue project" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what points to pay attention to when configuring multiple agents using the vue project". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.