Я бы рекомендовал сначала создать ваше приложение 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.log(`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 (или как бы ни назывался файл вашего сервера), и boom, ваше приложение vue теперь является приложением Express vue и готово к развертыванию!
Источник: я много раз делал эту настройку для своих сайтов.