node代理vue打包后的文件，实现本地测试

目录

• • 前言
  • 相关环境
  • 目录结构
  • package.json
  • app.js
  • proxyMiddleware.js

前言

在开发测试过程中，有些bug在本地开发时就是没问题，但是打包后或者部署后却一堆问题。

为减少打包部署后报错的尴尬局面或者频繁部署影响测试进度的问题，可以使用node在本地启一个服务，代理http或ws接口。本地做打包测试，确保无大问题后再部署测试环境。

相关环境

node v20.8.1

npm 10.1.0

目录结构

打包后的资源放在public下

package.json

{
  "dependencies": {
    "axios": "^1.7.9",
    "express": "^4.21.2",
    "http-proxy-middleware": "^3.0.5"
  }
}

app.js

// app.js
const express = require('express');
const path = require('path');
const proxyMiddlewares = require('./proxyMiddleware');

const app = express();
const PORT = 8081;

// ✅ 第一步：提供静态资源（Vue 打包后的文件）
// 这必须放在代理之前，避免被代理拦截
app.use(express.static(path.join(__dirname, 'public')));

// ✅ 第二步：挂载代理中间件（只匹配特定前缀）
proxyMiddlewares.forEach(mw => app.use(mw));

// ✅ 可选：如果使用 Vue Router history 模式，fallback 到 index.html
app.get('*', (req, res) => {
  const indexPath = path.join(__dirname, 'public', 'index.html');
  res.sendFile(indexPath, err => {
    if (err) {
      res.status(404).send('Not Found');
    }
  });
});

const server = app.listen(PORT, () => {
  console.log(`✅ Server running on http://localhost:${PORT}`);
  console.log(`📁 Serving static files from: ${path.join(__dirname, 'public')}`);
});

// WebSocket 支持
server.on('upgrade', (req, socket, head) => {
  for (const mw of proxyMiddlewares) {
    if (mw.upgrade && req.url?.startsWith('/message')) {
      mw.upgrade(req, socket, head);
      return;
    }
  }
  socket.destroy();
});

proxyMiddleware.js

// proxyMiddleware.js
const { createProxyMiddleware } = require('http-proxy-middleware');

const COMMON_HOST = '192.168.xx.xx';
const HTTP_PORT = '18081';      // 用于 crh-mutual 和 crh-settlement 和 message
const DOWNLOAD_PORT = '2880';   // 用于 sub

const proxyConfigs = [
  // 1. crh-mutual 接口
  {
    pathFilter: '/crh-mutual',
    target: `http://${COMMON_HOST}:${HTTP_PORT}`,
    changeOrigin: true,
    proxyTimeout: 120000,
    timeout: 120000,
  },
  // 2. crh-settlement 接口
  {
    pathFilter: '/crh-settlement',
    target: `http://${COMMON_HOST}:${HTTP_PORT}`,
    changeOrigin: true,
    proxyTimeout: 120000,
    timeout: 120000
  },
  // 3. sub 下载服务
  {
    pathFilter: '/sub',
    target: `http://${COMMON_HOST}:${DOWNLOAD_PORT}`,
    changeOrigin: true,
    proxyTimeout: 120000,
    timeout: 120000
  },
  // 4. WebSocket 消息服务
  {
    pathFilter: '/message',
    target: `http://${COMMON_HOST}:${HTTP_PORT}`,
    changeOrigin: true,
    ws: true,
    proxyTimeout: 120000,
    timeout: 120000
  }
];

// 创建中间件
const middlewares = proxyConfigs.map(config => {
  const { pathFilter, ...options } = config;
  console.log(`[HPM] Proxy created: ${pathFilter} → ${options.target}`);
  return createProxyMiddleware(options);
});

module.exports = middlewares;