vue。配置。未考虑js devServer

Question

我创建了一个前端vue。以springboot微服务作为后端的js。我正在尝试从前端vue调用后端（在本地网络的另一台pc 192.168.0.10:9090上运行）。js开发服务器（运行localhost:8080）。

我配置了vue.config.js官网链接：

module.exports = {
  transpileDependencies: ["vuetify"],
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.10:9090',
        changeOrigin: true,
      }
    }
  }
};

测试2：结果与

 module.exports = {
      devServer: {
        proxy: 'http://192.168.0.10:9090'
      }
    }

测试3：与测试结果相同

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.10:9090',
        changeOrigin: true,
        pathRewrite: {               // added this
          '^/api': ''                // added this
        },                           // added this
      }
    }
  }
};

我的商店。js

async get(commit, id){     
      var response = await axios({
        method: 'get',
        url:'/api/getmeeting',
        params: {'guid' : id}
      })
      console.log(this.response)
      return response.data; 
    }

测试2：

  async get(commit, id){     
          var response = await axios({
            method: 'get',
            url:'/getmeeting',
            params: {'guid' : id}
          })
          console.log(this.response)
          return response.data; 
        }

我没有成功使用我在vue.config.js.声明的代理

问题：所有请求都转到本地主机：8080/api/getmeeting？guid=xxxxx，而它应该调用192.168。0.10:9090/getmeeting。。。

我看了所有的官方文件，亲戚们的主题，整整看了8个小时，什么都没用。

那么，你能给我一些提示来找出我的devServer无法被识别的原因吗？

Answer 1

你需要路径重写：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.10:9090',
        changeOrigin: true,
        pathRewrite: {               // added this
          '^/api': ''                // added this
        },                           // added this
      }
    }
  }
};