Как создать приложение Node.js Express, обслуживающее Vue.js SPA?

Question

Я пытаюсь настроить проект Node.js, который использует Express для предоставления нескольких бэкэнд-API и обслуживания SPA, созданного с помощью Vue.js.

Когда я использую Vue cli для инициализации проекта я получаю, например, src/main.ts основной файл и команды npm run serve для запуска сервера разработки и отслеживания изменений и npm run build для создания производственного выпуска.

Когда я использую Генератор приложений Express для создания проекта, я получаю ./app.js основной файл и npm start для запуска сервера и отслеживания изменений.

Как можно объединить их в один проект, обаобслуживается тем же сервером Express?Желательно, чтобы одна команда наблюдала + обновляла изменения как на сервере, так и на клиенте?Я хочу использовать отдельные файловые компоненты Vue и TypeScript, которые (вероятно?) Требуют шага сборки.

(мне не нужен динамический рендеринг шаблонов Vue на стороне сервера, только предоставленное статическое приложение SPA. IЯ предпочитаю TypeScript, но ответы на JavaScript тоже подойдут.)

Answer 1

Они будут отличаться для ваших сред разработки и разработки ...

Для разработки посмотрите одновременно - это в основном позволяет вам создать отдельный скрипт в вашем package.json для запускаи клиент, и сервер одновременно, и будут следить за изменениями и т. д. *

Для производства вам понадобится что-то подобное в вашем app.js:

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));

  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

(Код выше предполагает, что ваша структура каталогов имеет клиентскую папку с папкой сборки после запуска npm run build Я больше знаком с React, чем с Vue ... но логика должна быть такой же ... )