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

user_2377343 0
Viewed 408

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?

webpack-dev-server vue.js webpack node.js javascript
1 Answers

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"
  }
}
user_62771510
Related