在前端开发中，代理配置是解决跨域问题的常见手段。尤其是在使用 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': '' },
},
},
},
};
这种配置方式虽然简单，但存在以下问题：
- 静态配置：修改代理配置后，需要重启开发服务器才能生效。
- 不支持注释：JSON 文件不支持注释，配置复杂时难以维护。
- 灵活性不足：无法在配置文件中编写逻辑（如条件判断、函数等）。
为了解决这些问题，我们可以通过以下方式实现动态代理配置。
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': '' },
},
} : {}),
};
