Vue代理配置重写方法(pathRewrite与rewrite)

在Vue项目中，如果你需要使用代理配置来重写请求的路径，你可以使用pathRewrite和rewrite选项。以下是一个简单的例子，展示如何使用这两种方式来重写请求路径。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        pathRewrite: function (path, req) {
          // 使用正则表达式匹配到/api，并将其替换为空字符串
          return path.replace(/^\/api/, '');
        },
        changeOrigin: true
      },
      '/special-endpoint': {
        target: 'http://other-backend.example.com',
        rewrite: function (path) {
          // 直接重写路径到新的端点
          return '/new-endpoint';
        },
        changeOrigin: true
      }
    }
  }
};

在这个配置中：

• /api 的代理配置使用了pathRewrite，它是一个函数，它接收当前请求的路径和请求对象作为参数，并返回重写后的路径。这个例子中，它使用正则表达式将路径开头的/api替换为空字符串。
• /special-endpoint 的代理配置使用了rewrite，它也是一个函数，它接收当前请求的路径作为参数，并返回重写后的路径。这个例子中，它直接将请求重写到/new-endpoint。

这样配置后，当你向/api/some/path发送请求时，它将被代理到http://backend.example.com/some/path；而向/special-endpoint发送请求时，它将被代理到http://other-backend.example.com/new-endpoint。