目录

为什么有这个小工具

实现原理

使用方法

自定义配置

---

为什么有这个小工具

webpack 里面的 devserver 插件，能够方便我们开发调试。但是为了开发一个简单的页面，而安装配置 webpack，未免大材小用，所以考虑把插件功能单独实现。

实现原理

使用 express 建立一个本地服务，托管静态资源，通过中间件 http-proxy-middleware 实现后台接口的反向代理。实现代码如下：

  const app = express();
  // 静态资源目录
  app.use(express.static(STATIC_DIR));
  // 代理后端接口
  app.use(createProxyMiddleware("/api", { target: PROXY_TARGET }));
  app.listen(app.get("port"), () => {});

使用方法

1. 下载 proxy 工具包 proxy.zip
2. 解压后，进入文件夹，将静态文件放置在dist目录
3. 双击文件运行 proxy.exe，如提示需要权限点击确认。停止服务，使用 ctl+c 或关闭 cmd 窗口即可

自定义配置

没有配置文件的话，默认静态文件目录为同级目录dist文件夹，默认http端口 8000 ，https端口为 4430。同级目录下的 config.js 未配置文件，格式如下：

{
  "port": 8000,
  "https_port": 4430,
  "static_dir":"/home/test/dist",
  "history": true,
  "open": false,
  "easyv": false,
  "proxy": {
    "/api": {
      "target": "http://192.168.204.193:8005",
      "changeOrigin": true,
      "ws": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  }
}

配置文件支持参数如下：

• port：http服务端口
• https_port：https服务端口
• static_dir：静态文件路径
• history：try_files模式
• open：是否自动打开浏览器
• easyv：是否是easyv大屏静态资源文件
• proxy：用法同webpack的devserver