html - Vue.js 具有相同路径和不同端口的多个代理

Question

所以我用这样的代理调用一个api：

xx.vue：

getVersion(){
        axios.get('/service/details/')
        .then(response => this.version = response.data.build.version)

vue.config.js ：

module.exports = {
devServer: {
  proxy: {
    '^/service/': {
      target: 'http://localhost:8181/',
      changeOrigin: true,
      secure:false,
      pathRewrite: {'^/service': '/service/'},
      logLevel: 'debug'
    }
  }
}
}

html:

<p v-bind="getVersion()"> Version : {{version}} </p>

我想使用相同的方法获取另一个服务的版本。该服务具有不同的端口和相同的路径（/service/details），我无法直接在 config.vue.js 中添加它：

'^/service/': {
  target: 'http://localhost:5051/',
  changeOrigin: true,
  secure:false,
  pathRewrite: {'^/service': '/service/'},
  logLevel: 'debug'
}

PS：我无法更改后端的网址

标签： htmlvue.jsvuejs2proxynginx-reverse-proxy