vue.config.js配置多个proxy 举例实现

可以在 vue.config.js 文件中使用以下代码配置多个 proxy：

module.exports = {
devServer: {
proxy: {
'/api1': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api1': ''
}
},
'/api2': {
target: 'http://localhost:4000',
changeOrigin: true,
pathRewrite: {
'^/api2': ''
}
}
}
}
}

在上述代码中，配置了两个代理请求，一个是以 /api1 起始的请求会被代理到本地的 3000 端口上，另一个是以 /api2 起始的请求会被代理到本地的 4000 端口上。同时，changeOrigin 参数设置为 true 表示开启跨域请求，pathRewrite 参数用于转义请求路径中的部分内容。

相关问题

vue.config.js配置多个api

可以通过在vue.config.js文件中使用多个proxy配置来配置多个API。每个proxy配置都应该具有一个不同的路径，以便能够区分不同的API。例如，可以按照以下方式配置多个API：

module.exports = {
devServer: {
proxy: {
'/api1': {
target: 'http://example.com',
changeOrigin: true,
pathRewrite: {
'^/api1': ''
}
},
'/api2': {
target: 'http://example2.com',
changeOrigin: true,
pathRewrite: {
'^/api2': ''
}
}
}
}
};

在上述配置中，我们为第一个API使用了'/api1'路径，并将其代理到'http://example.com'。类似地，我们为第二个API使用了'/api2'路径，并将其代理到'http://example2.com'。

vue.config.js配置devServer.proxy

在 vue.config.js 中，你可以使用 devServer.proxy 来配置代理。这个选项可以帮助你将 API 请求代理到其他的后端服务。

下面是一个示例配置的代码段：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 将请求代理到这个目标地址
        changeOrigin: true, // 设置为true，以便更改请求头中的Host字段为目标URL
        pathRewrite: {
          '^/api': '', // 将/api路径重写为空字符串
        },
      },
    },
  },
};

这个配置会将以 `/api` 开头的请求代理到 `http://example.com`。

例如，当你发送一个请求到 `/api/users` 时，它会被代理到 `http://example.com/users`。

你可以根据自己的需要进行配置，更多关于 devServer.proxy 的详细信息可以参考 Vue CLI 的官方文档。