How to fix Hot Reload on Vue 2 application?

Question

I am developing Vue 2 cli application.

Hot reload is not working, assumably because of '[WDS] Disconnected!' and 'sockjs-node ERR_CONNECTION_TIMED_OUT' errors.

Client is running on 'http://localhost:8080' (Vue 2)

Server is running on 'https://localhost:5001' (Dotnet core)

Client is proxied to the 'https://localhost:5001', so the app is opened in the browser using that url

############

This is my babel.config.js file:

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
};

And my vue.config.js

module.exports = () => {
  const config = {
    lintOnSave: false,
    configureWebpack: {
      devtool: 'inline-source-map'
    },
    transpileDependencies: ["vuetify"],
    devServer: {
      //
    },
    chainWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        config
          .plugin('html')
          .tap(args => {
            args[0].publicPath = '/dev/';
            return args;
          });
      } else {
        // nothing to do here
      }
    }
  };

  if (process.env.NODE_ENV === 'production') {
    config.publicPath = '/dev/';
  }

  return config;
};

I am trying to fix the hot reload, and I assume it is because Webpack dev server is requesting the file at a wrong port.

Answer 1

I managed to solve this issue by adding these props to vue.config.js file

devServer: {
  port: 8080,
  public: 'https://localhost:5001'
},

I sure hope this will help someone out there