reflect changes in devServer without need to reload Node server (Webpack & Vue-cli)

Question

Let's say I have a Vue CLI project that uses this vue.config.js :

module.exports = {
  ...
  devServer: {        
    before: function(app, server, compiler) {
        app.get('/my_response', function(req, res) {                
            res.json({ custom: 'Hello world' });
        });
    },
  }
}

To run the server, everytime I use:

yarn serve

However, once the localhost server is live, and from the front-end, I make AJAX ( axios , etc) requests to the /my_response endpoint, the front-end gets a response, but if i change "hello world" , AJAX doesn't get the changed value until yarn serve is restarted.

How can I make it so that when I change the backend logic in vue.config.js , it wouldn't need a server restart?

Answer 1

As of Vue CLI 4.5.7, there's no built-in support for hot-reloading vue.config.js .

A workaround is to install npm-watch , and edit your package.json to include the following:

{
  "watch": {
    "serve": "vue.config.js"
  },
  "scripts": {
    "watch": "npm-watch"
  }
}