vue/cli 配置动态代理无需重启服务的操作方法

当我们使用 vue/cli 搭建项目时，通常需要在本地启动一个开发服务器来开发、调试我们的应用。而有时候，我们需要通过代理的方式请求后端API，而又不想每次修改代理配置都需要重启服务，该如何实现呢？以下是配置动态代理无需重启服务的操作方法的完整攻略：

步骤一：安装http-proxy-middleware

在项目的根目录下，运行以下命令安装 http-proxy-middleware。

npm install --save-dev http-proxy-middleware

步骤二：在 vue.config.js 中配置代理

在项目根目录下创建 vue.config.js 文件，并在文件中编写代理配置。例如：

const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        onProxyReq(proxyReq) {
          // 可选：修改请求头
          proxyReq.setHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
        },
        onProxyRes(proxyRes) {
          // 可选：修改响应头
          proxyRes.headers['X-Custom-Header'] = 'foobar';
        }
      }
    }
  }
}

以上配置中，我们设置了一个代理，将所有以 /api 开头的请求转发到 http://api.example.com。其中，changeOrigin 选项为 true 时，会将请求头中的 Host 字段改为目标服务器的域名。pathRewrite 选项是用于重写 URL 的，默认情况下，代理会将匹配到的路径（即 /api）从请求 URL 中移除，但我们可以通过 pathRewrite 选项来自定义重写规则。onProxyReq 和 onProxyRes 是可选选项，它们提供了在请求发出或响应发回时，修改请求头和响应头的机会。

步骤三：通过重启 npm run serve 命令来使代理配置生效

以上配置完成后，我们需要重启 npm run serve 命令，使代理配置生效。每次修改代理配置（包括路径重写规则、目标服务器地址等），都需要执行这个命令使配置生效。

步骤四：使用 http-proxy-middleware 的 express middleware 使代理配置无需重启服务

我们可以通过使用 http-proxy-middleware 的 express middleware 来使代理配置无需重启服务。在 vue.config.js 中添加以下代码：

const express = require('express');
const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    before(app) {
      const apiProxy = proxyMiddleware('/api', {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        onProxyReq(proxyReq) {
          proxyReq.setHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
        },
        onProxyRes(proxyRes) {
          proxyRes.headers['X-Custom-Header'] = 'foobar';
        }
      });

      const appProxy = proxyMiddleware('/', {
        target: 'http://app.example.com',
        changeOrigin: true,
        onProxyReq(proxyReq) {
          proxyReq.setHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
        },
        onProxyRes(proxyRes) {
          proxyRes.headers['X-Custom-Header'] = 'foobar';
        }
      });

      app.use(apiProxy);
      app.use(appProxy);
    }
  }
}

以上代码中，我们使用了 before 函数来添加中间件，在 before 函数中，我们为不同的路径添加了不同的代理，通过 app.use() 方法将代理添加到应用中。这样，当我们修改代理配置时，无需重启服务，配置会立即生效。

示例说明一: 配置静态代理

如果我们想将所有请求都转发到同一个目标服务器，我们可以使用静态代理。在 vue.config.js 中添加以下代码：

const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  }
}

以上配置会将所有请求都转发到 http://api.example.com。但是，由于使用的是静态代理，所以我们必须重启服务才能使配置生效。

示例说明二: 配置动态代理

如果我们想将请求转发到不同的目标服务器，我们可以使用动态代理。在 vue.config.js 中添加以下代码：

const express = require('express');
const proxyMiddleware = require('http-proxy-middleware');

module.exports = {
  devServer: {
    before(app) {
      const apiProxy = proxyMiddleware('/api', {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      });

      const appProxy = proxyMiddleware('/', {
        target: 'http://app.example.com',
        changeOrigin: true
      });

      app.use(apiProxy);
      app.use(appProxy);
    }
  }
}

以上配置中，我们针对不同的路径设置了不同的目标服务器。当我们修改代理配置时，无需重启服务，配置会立即生效。