Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use the vue project to configure multiple agents". In the daily operation, I believe many people have doubts about how to use the vue project to configure multiple agents. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to use the vue project to configure multiple agents". Next, please follow the editor to study!

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},}

Of course, in the formal deployment, the back-end is still needed to do a unified agent.

At this point, the study on "how to use the vue project to configure multiple agents" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.