代理启动前端dist包

目录

前言：

主要技术：

步骤：

1、新建代理文件proxy.js

2、安装依赖：

3、启动代理

4、访问

后记优化：

---

前言：

开发过程中需要频繁和前端进行联调，前端同事只有一个，需要对接的后端却有好几个，导致前端分身无术，拖慢开发效率，于是让前端同事打包一份dist，这篇文章主要来讲解如何在本地启动前端包后进行联调

主要技术：

后端是springcloud（本篇讲的也是如何请求到网关）、前端用的vue

步骤

1、新建代理文件proxy.js

解压dist文件，打开后，可以看到css、js等文件夹，如下图所示

在同级目录新建代理文件proxy.js

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
app.use(express.static(__dirname));

// 关键：代理 /api 到网关 5001
app.use('/api', createProxyMiddleware({
  target: 'http://127.0.0.1:5001',
  changeOrigin: true
}));


// 端口 3001
app.listen(3001, () => {
  console.log('=====================================');
  console.log('✅ 前端启动：http://127.0.0.1:3001');
  console.log('✅ 已代理：/api -> 5001');
  console.log('=====================================');
});

我本地启动的网关是5001：

前端请求的接口格式是api/```,；如果接口格式不一样需要改相对应的上述js

2、安装依赖：

打开命令行进入dist文件夹后运行：

npm install express http-proxy-middleware

3、启动代理：

还是在命令行中运行

node proxy.js

4、访问

在日志中看到如下信息：点开链接访问

至此就成功啦！

后记优化：

启动后的前端进行页面刷新后页面会消失,页面显示报Cannot GET 【你的接口地址】

const express = require('express');
const path = require('path');
const app = express();

// 静态资源
app.use(express.static(__dirname));

// ------------------------------
// 原来的代理
// ------------------------------
app.use('/api', require('http-proxy-middleware').createProxyMiddleware({
  target: 'http://127.0.0.1:5001',
  changeOrigin: true
}));

// ------------------------------
// 修复刷新 404（无通配符，不报错）
// ------------------------------
app.use((req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

// 端口 3001
app.listen(3001, () => {
  console.log('=====================================');
  console.log('✅ 前端启动：http://127.0.0.1:3001');
  console.log('✅ 接口代理：5001');
  console.log('✅ 刷新正常');
  console.log('=====================================');
});