title: How to fix Hot Reload on Vue 2 application?
body: <p>I am developing Vue 2 cli application.</p>
  <p>Hot reload is not working, assumably because of
  '[WDS] Disconnected!' and
  'sockjs-node ERR_CONNECTION_TIMED_OUT' errors.</p>
  <p><a href="https://i.stack.imgur.com/nrYfh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nrYfh.png" alt="enter image description here" /></a></p>
  <p>Client is running on 'http://localhost:8080' (Vue 2)</p>
  <p>Server is running on 'https://localhost:5001' (Dotnet core)</p>
  <p>Client is proxied to the 'https://localhost:5001', so the app is opened in the browser using that url</p>
  <p><a href="https://i.stack.imgur.com/AHkfL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AHkfL.png" alt="enter image description here" /></a></p>
  <p>############</p>
  <p>This is my babel.config.js file:</p>
  <pre><code>module.exports = {
      presets: [&quot;@vue/cli-plugin-babel/preset&quot;],
  };
  </code></pre>
  <p>And my vue.config.js</p>
  <pre><code>module.exports = () =&gt; {
    const config = {
      lintOnSave: false,
      configureWebpack: {
        devtool: 'inline-source-map'
      },
      transpileDependencies: [&quot;vuetify&quot;],
      devServer: {
        //
      },
      chainWebpack: config =&gt; {
        if (process.env.NODE_ENV === 'production') {
          config
            .plugin('html')
            .tap(args =&gt; {
              args[0].publicPath = '/dev/';
              return args;
            });
        } else {
          // nothing to do here
        }
      }
    };
  
    if (process.env.NODE_ENV === 'production') {
      config.publicPath = '/dev/';
    }
  
    return config;
  };
  </code></pre>
  <p>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.</p>