Vue: 404 connection refused errors in browser console

An issue I had recently was where I was seeing numerous errors in my browser console, that looked like this:

http://localhost:4000/sockjs-node/info?t=1555523570042 net::ERR_CONNECTION_REFUSED

If you’re seeing errors like these in your browser console, you’re probably running your Vue app using vue-cli-service which is a part of vue-cli. This is the development server basically, which serves your Vue app.

What you need to do to get rid of the errors, is you need to specify a port in your webpack config file. The webpack config file is located at vue.config.js in your project folder.

This is what I have in my vue.config.js file:

module.exports = {
    devServer: {
        disableHostCheck: true,
        host: '0.0.0.0',
        port: 4000
    }
}

Weird ESLint errors in vue-cli projects

If you’re getting weird errors such as the one below:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Unexpected token < at src/components/ChatApp.vue:1:1:
> 1 | <template>
    | ^
  2 |     <div>
  3 |           <div v-for="message in messages">
  4 |

You may need to install eslint-plugin-vue.

This tells ESLint about *.vue files, and how they are formatted. The error above is ESLint getting confused, because it doesn’t understand the structure of Vue’s single file components. Installing the eslint-plugin-vue module makes ESLint aware of *.vue files.