This is a tool to help webpack or vue-cli to enable proxy hot reload.
npm install dynamic-proxy --save-dev
yarn add dynamic-proxy -D
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",
},
};
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); }, }, };
-
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
withproxyFile
andwatchFiles
.// ... const options = { proxyFile: path.join(__dirname, "custom.proxy.js"), watch: [ // someother file's path like `proxyFile` field. // proxy server will reload when these files changed ], }; module.exports = { // ... devServer: { // ... after(app) { useProxy(app, options); }, }, };