DynamicProxy

This is a tool to help webpack or vue-cli to enable proxy hot reload.

Install

npm:

npm install dynamic-proxy --save-dev

yarn

yarn add dynamic-proxy -D

Example

1、Proxy File

Create a proxy file or use default proxy.js in your root dir.

The file content like this:

module.exports = {
  "/api": {
    ws: true,
    changeOrigin: true,
    target: "http://127.0.0.1:8888",
  },
};

2、Use Proxy

vue.config.js or webpack.config.js

• For webpack-dev-server v3 or vue/cli

  // ...
  const { useProxy } = require("dynamic-proxy");
  
  module.exports = {
    // ...
    devServer: {
      // ...
      after(app) {
        useProxy(app); // or useProxy(app, options)
      },
    },
  };

• For webpack-dev-server v4

  const { useProxy } = require("dynamic-proxy");
  
  module.exports = {
    devServer: {
      onAfterSetupMiddleware: function (devServer) {
        useProxy(devServer.app);
      },
    },
  };

Custom options

• Options can be a string to declare the proxy file where is.

  // ...
  const filename = path.join(__dirname, "custom.proxy.js");
  
  module.exports = {
    // ...
    devServer: {
      // ...
      after(app) {
        useProxy(app, filename);
      },
    },
  };

• Options also can be a object with proxyFile and watchFiles.

  // ...
  
  const options = {
    file: path.join(__dirname, "custom.proxy.js"),
    watch: [
      // if you use the verson >= 1.1.1, this may useless because it will auto collect the dependences for `file` field.
      // someother file's path like `file` field.
      // proxy server will reload when these files changed
    ],
  };
  
  module.exports = {
    // ...
    devServer: {
      // ...
      after(app) {
        useProxy(app, options);
      },
    },
  };