Solve the problem of using proxy to configure different ports and IP interfaces in Vue

Problem description:

The project created using vue-cli has the development address of localhost:8080. Due to the development of different modules in the background, the IP and port numbers requested by each module are inconsistent.

For example:http://192.168.10.22:8081orhttp://192.168.10.30:9999wait

Solve the problem:

Configure different port numbers in

 = {
  publicPath: .NODE_ENV === 'production' ? './' : '/',
  devServer: {
    open: true,
    proxy: {
      '/monitor': {// Configure variables        target: 'http://192.168.10.30:9999',// The third-party interface that needs to be requested        changeOrigin: true,// Turn on the proxy：

A virtual server will be created locally, then the request will be sent and the request will be received at the same time, so that there will be no cross-domain problems when interacting with the server and the server.

        pathRewrite: {　// Rewrite the path here. If the monitor itself does not exist in the interface path, it must be written as empty!  !  !          '^/monitor': ''
        },
        ws: false
      }
    }
  }
}

When calling this interface, you need to write '/monitor/'

export const getDictionary = ((params) => {
  return _axios({
    url: '/monitor/keypersonnel/getDictionaryForType',
    method: 'post',
    data: params
  })
})

Note: The proxy proxy is only valid in the local testing development environment. How should it be distinguished when deployed online?

question:

If different modules in the project request interfaces with different IP and ports, how should it be set to be configurable? The backend can be modified to avoid continuous packaging and online due to interface problems.

Idea 1: Place json files in the public directory. When configuring, read json files

<template>
 <div class="er">
  <el-scrollbar style="height:100%">
   <div class="ds">
    <img
     class="sdde"
     :src='`${publicPath}imges/but_play.png`'
    >
   </div>
  </el-scrollbar>
 </div>
</template>
<script>
export default {
 data() {
  return {
   publicPath: .BASE_URL
  }
 },
 components: {
 }
}
</script>

Result: Failed! Assigning the src to the image successfully, but using the same method to require the json file in create, it still reports a path error

Idea 2: Create a new js file in public, mount the address on the window in the js file, and introduce it into the index html file

// Configure the request address on the line = {
  publicSentiment: 'http://192.168.10.22:8081', // Public opinion analysis  monitor: 'http://192.168.70.6:9999' // Key personnel monitoring} 

Summarize

The above is the solution to the problem of using proxy to configure different ports and IP interfaces in Vue. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone 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!