How to develop vue.js + node.js locally?

Question

Node.js

New to vue and node!
How to combine Node.js and vue.js so they work like a normal website? Now I’m separately launching it through the vue console
E:\project> npm run dev
As a result, you can get to the site at localhost:8080
The same project contains the server.js file, to start which I added start to package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "dev": "npm run serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server/server.js"
  }

The content of the file is:

const express = require('express');
const app = express();
const path = require('path');
var http = require('http').Server(app);
var io = require('socket.io')(http);
// var ip = require('ip');
// var i = ip.address() // my ip address


app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('an user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

After running it, it prints an entry to the console and makes the server available at localhost:3000
How to combine node and vue?
How in that case they will work on the server?
How to make socket.io work?
Maybe there are ready-made examples?
I couldn't find anything clear on Google, maybe I just searched badly.

Answer 1

In production, they will already work on the same port.
On LAN in dev, they work in a browser with an application that is raised by vue (webpack dev server, in your case on 8080).
In order for requests from the application to go to the nodejs server, it is enough to add a proxy to the webpack.
In vue.conf.js (or whatever the config is called) add to the webpack config:

devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
}

Webpack proxy docu
link Link to webpack configuration docu in vue cli
That's all if you have a SPA.