告别重启！Vue CLI 动态代理配置实战：实现热更新与灵活配置

在前端开发中，代理配置是解决跨域问题的常见手段。尤其是在使用 Vue CLI 进行开发时，我们经常需要通过 devServer.proxy 来配置代理。然而，传统的代理配置通常是静态的，修改后需要重启开发服务器，这在频繁调整代理配置的场景下显得非常不便。本文将介绍一种动态代理配置的解决方案，通过监听配置文件的变化，实现代理配置的热更新，无需重启开发服务器。同时，我们将代理配置从 JSON 文件改为 JavaScript 文件，支持注释和更灵活的配置方式。

1. 背景与痛点

在 Vue CLI 项目中，我们通常会在 vue.config.js 中配置代理，例如：

module.exports = {devServer: {proxy: {'/api': {target: 'http://your-default-target.com',pathRewrite: { '^/api': '' },},},},
};

这种配置方式虽然简单，但存在以下问题：

1. 静态配置：修改代理配置后，需要重启开发服务器才能生效。
2. 不支持注释：JSON 文件不支持注释，配置复杂时难以维护。
3. 灵活性不足：无法在配置文件中编写逻辑（如条件判断、函数等）。

为了解决这些问题，我们可以通过以下方式实现动态代理配置。

2. 解决方案

2.1 使用 JavaScript 文件存储代理配置

我们将代理配置从 proxy-config.json 改为 proxy-config.js，利用 JavaScript 文件的灵活性，支持注释和动态逻辑。

proxy-config.js 示例：

module.exports = {
// API 代理配置
'/api': {target: 'http://your-default-target.com', // 目标服务器pathRewrite: { '^/api': '' }, // 路径重写changeOrigin: true, // 支持跨域},// 其他代理配置
'/auth': {target: 'http://auth-server.com',pathRewrite: { '^/auth': '' },changeOrigin: true,},
};

2.2 动态加载代理配置

通过 chokidar 监听 proxy-config.js 文件的变化，并在文件变化时重新加载代理配置。

setupProxy.js 实现：

const path = require('path');
const { createProxyMiddleware } = require('http-proxy-middleware');
const chokidar = require('chokidar');// 代理配置文件路径
const proxyConfigPath = path.resolve(__dirname, 'proxy-config.js');// 初始化代理配置
let proxyConfig = require(proxyConfigPath);
console.log('Initial proxy config:', proxyConfig);// 导出代理配置函数
module.exports = function setupProxy(app) {
// 动态设置代理
let proxyMiddlewares = {};const updateProxies = () => {// 清空之前的代理Object.keys(proxyMiddlewares).forEach((context) => {app._router.stack = app._router.stack.filter((layer) => layer.handle !== proxyMiddlewares[context]);});// 重新加载代理配置deleterequire.cache[require.resolve(proxyConfigPath)]; // 清除缓存proxyConfig = require(proxyConfigPath); // 重新加载配置// 重新设置代理Object.keys(proxyConfig).forEach((context) => {const options = proxyConfig[context];console.log(`Setting up proxy for ${context}:`, options);const middleware = createProxyMiddleware(options);proxyMiddlewares[context] = middleware;app.use(context, middleware);});};// 初始化代理updateProxies();// 监听文件变化chokidar.watch(proxyConfigPath).on('change', () => {console.log('Proxy config file changed, reloading...');updateProxies(); // 重新设置代理});
};

2.3 在 vue.config.js 中集成

在 vue.config.js 中引入 setupProxy.js，并将代理配置应用到开发服务器。

vue.config.js 示例：

const setupProxy = require('./setupProxy');module.exports = {devServer: {host: 'localhost', // 开发服务器主机port: 8080, // 开发服务器端口clientLogLevel: 'warning', // 日志级别before(app) {console.log('Setting up proxy...');setupProxy(app); // 动态代理配置},},
};

3. 实现效果

3.1 动态更新代理配置

• 启动开发服务器：

npm run serve

• 修改 proxy-config.js 文件，例如：

module.exports = {'/api': {target: 'http://new-target.com', // 修改目标服务器pathRewrite: { '^/api': '/new-api' }, // 修改路径重写changeOrigin: true,},
};

• 保存文件后，chokidar 会检测到文件变化，并自动重新加载代理配置。你可以在终端中看到日志输出：

Proxy config file changed, reloading...
Setting up proxy for /api: {target: 'http://new-target.com',pathRewrite: { '^/api': '/new-api' },changeOrigin: true
}

• 代理配置会立即生效，无需重启服务。

3.2 支持注释与灵活配置

由于 proxy-config.js 是 JavaScript 文件，你可以轻松添加注释，甚至编写逻辑：

module.exports = {
// API 代理配置
'/api': {target: process.env.API_TARGET || 'http://default-target.com', // 支持环境变量pathRewrite: { '^/api': '' },changeOrigin: true,},// 根据条件动态配置...(process.env.NODE_ENV === 'development' ? {'/dev': {target: 'http://dev-server.com',pathRewrite: { '^/dev': '' },},} : {}),
};