Detailed explanation of the configuration method of Vue multi-environment agent

background:

In multiplayer collaboration mode, modifying the agent is more troublesome, and it is easy for a developer to modify the file and submit it.

First, it is easy to cause conflict.

Second, it is easy to make modern management errors and needs to be investigated. Moreover, microservices are popular now. If there is a gateway configuration in a production environment, there will be no errors, but local debugging will cause trouble. If you modify the proxy address and need to synchronize the address in the proxy, it is very troublesome and easy to make mistakes.

Solution:

1. Define constant js files in development, for example. The service name that users need to proxy for each service.

let api = ""
  let loginServer = "/loginServer"
  let businessServer = "/businessServe"
  if(.NODE_ENV == "development"){
    api = "/api"
    loginServer = api + LoginServer
    businessServer = api + businessServer
  }
  export {
    loginServer,
    businessServer
  }

The API is configured in the proxy rule, and loginServer is the service name. It can be replaced in the actual business according to the needs of the business.

import {loginServer} from 'constants'
 function login(params){
  return (loginServer+"/login",params)
 }

where loginServer is the service name, login is the method name, and params is the parameter.

Configure the proxy in

 = {
  publicPath:"/" ,
  devServer: {
    port: 8080,
    proxy:{
     '/api/loginServer':{
       target:"http://localhost:8080",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     },
      '/api/businessServer':{
       target:"http://localhost:8081",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     }
    }
  }
}

This configuration can meet the needs, but there will be multiple changes, which will cause the above error.

Solution:

vue provides --mode mode and provides . and other files. This file is ignored by git, and the environment variable configuration can be found according to the value set by the current mode. For example, --mode=dev, then the configuration in . or . and other files will take effect, and the .local file will be ignored by git. Therefore, we use this, --mode is set in , and add it in npm run serve

script:{
"serve":"vue-cli-service serve --mode=dev"
}

In the jianli . file in the project root directory, add the following key-value pairs to the file (only key-value pairs are accepted in this file

）

.

loginServerURL =http://localhost:8080
businessServerURL = http://localhost:8081

Of course, different local files can be created according to different modes

.wait

Rewrite in

 = {
  publicPath:"/" ,
  devServer: {
    port: 8080,
    proxy:{
     '/api/loginServer':{
       target:?:"httpL//localhost:8080",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     },
      '/api/businessServer':{
       target:? :"http://localhost:8081",
       ws:true,
       changeOrigin:true,
       pathRewrite:{
         '^/api':'/'
       }
     }
    }
  }
}

This way, different addresses can be configured according to different environments.

Summarize

The above is a detailed explanation of the Vue multi-environment proxy configuration method and ideas introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!