Разработка стека node.js, vue.js и express.js

Я бы порекомендовал сначала создать ваше приложение vue. Добавляйте материалы в Express вручную, потому что это быстро и просто.

1. Начните с создания вашего приложения vue

Если вы будете следовать документация vue здесь, используя vue-cli, он все структурирует для вас.

Содержимое вашего источника vue будет находиться в каталоге src в корне вашего проекта. После запуска npm run build (так же, как vue-cli-service build) будет создан каталог dist, содержащий встроенный клиентский код.

2. Добавить в экспресс

Я бы рекомендовал поместить ваш код на стороне сервера в новый каталог в корне вашего проекта, скажем, server, затем создать файл в этом каталоге и добавить приведенный ниже код...

const express = require('express');
const history = require('connect-history-api-fallback');
const path = require('path');

require('dotenv').config()

const app = express();

const port = process.env.PORT || 8080;

// Serve up built vue app, at the main root
const staticFileMiddleware = express.static(path.join('dist'));
app.use(staticFileMiddleware);
app.use(history({
  disableDotRule: true,
  verbose: true
}));
app.use(staticFileMiddleware);


// Make all public assets available 
app.use('/public', express.static('public'))

// App has started
app.listen(port, () => 
    console.info(`Awesome app has started and is running on port ${port} ?`)
);

Вам понадобится несколько зависимостей, для приведенного выше примера вам понадобится yarn add express connect-history-api-fallback dotenv (или используйте npm).

• express явно нужен
• connect-history-api-fallback dotenv необходим, если вы используете режим истории в vue, это необходимо, чтобы не получать 404 на каждой подстранице.
• А dotenv — это просто удобные для чтения константы из вашего файла .env, которые вы также должны создать

Наконец, чтобы запустить его, введите node server/main (или как вы назвали этот файл в каталоге вашего сервера).

Вероятно, вы захотите добавить эту команду в ваш package.json.

 "scripts": {
    "start": "node server/main",
     ...

Если вы используете Heroku, дважды проверьте правильность всех ваших зависимостей в вашем package.json, затем создайте файл с именем Procfile в корневом каталоге, содержащий следующий web: node ./server/main.js (или как называется файл вашего сервера), и бум, ваше приложение vue теперь является Express vue и готово к развертыванию!

Источник: я много раз делал эту настройку для своих сайтов.