Как разрабатывать vue.js + node.js на локалке?

Question

[kr_ilya]

Во vue и node новичок!
Как совместить Node.js и vue.js, чтобы они работали как обычный сайт? Сейчас отдельно запускаю через консоль vue
E:\project> npm run dev
В итоге на сайт можно попасть по адресу localhost:8080
В этом же проекте лежит файл server.js, для запуска которого я добавил start в 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"
  }

Содержание файла такое:

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');
});

После его запуска, он выводит запись в консоль и ставится доступен сервер по адресу localhost:3000
Как совместить node и vue?
Как в таком случае они будут работать на сервере?
Как осуществить работу socket.io?

Может есть готовые примеры?
В гугле ничего понятного не нашел, может просто искал плохо.

Comments

[Александр]

Почитайте про webpack

Answer 1

[Григорий К.]

На production они уже будут работать на одном порту.

На локалке в дев работают в браузере с приложением, которое поднято vue (webpack dev server, в вашем случае на 8080).

Чтобы запросы с приложения шли на сервер на nodejs достаточно добавить прокси в вебпак.
Во vue.conf.js (или как там конфиг называется) добавить в конфиг вебпака:

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

Ссылка на доку по прокси в вебпаке

Ссылка на доку по конфигурированию вебпака во vue cli

Это всё, если у вас SPA.