CODEWITHSUNDEEP
vue.jswebpack.net-corebabeljshot-reload
JozeV
JozeV

Reputation: 696

How to fix Hot Reload on Vue 2 application?

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.

enter image description here

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

enter image description here

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

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.

Upvotes: 1

Views: 4856

Answers (1)

JozeV
JozeV

Reputation: 696

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

Upvotes: 1

Related Questions