Как совместить сервер приложений Vue и Express?

Question

У меня есть приложение vue, которое работает на http://localhost:8080/ (через Vue CLI), а серверная часть работает на Express на http://localhost:7070.Можно ли запустить веб-интерфейс и серверную часть под одним и тем же адресом (не теряя возможности горячей замены модуля с сервера Vue CLI)?

Answer 1

То, что вы ищете, это опция devServer.Если вы используете vue cli 3, создайте файл vue.config.js в главном каталоге приложения, а затем добавьте этот блок:

module.exports = {
  configureWebpack:{
  }, 
  devServer:{
    host: 'localhost',
    hot:true,
    port: 8080,  
    open: 'Chrome',
    proxy: { //https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation
      '/*':{ //everything from root
        target: 'http://localhost:3000',
        secure: false,
        ws: false,
      },
      '/ws/': { //web sockets
        target: 'http://localhost:3000',
        secure: false,
        ws: true
      },
      '!/':{ //except root, which is served by webpack's devserver, to faciliate instant updates
        target: 'http://localhost:3000/',
        secure: false,
        ws: false
      },
    }
  }
}

Порт для вашего веб-интерфейса может быть на 8080 или как угодно, иваш бэкэнд на 7070, и вы проксируете свои запросы от вашего сервера внешнего узла на 8080 к вашему внутреннему серверу на 7070. Это для vue cli 3. Для более ранних версий вы должны поместить опцию devServer где-нибудь еще в IIRC, но я забываю, где,Если у вас есть проблемы с этим, спросите меня, и я могу проверить это.

Answer 2

Поскольку Vue - это всего лишь библиотека frontend , самый простой способ разместить ее и выполнить такие действия, как обслуживание ресурсов, - это создать простой экспресс-дружественный скрипт, который можно использовать для запуска мини-веб-сервера.Читайте быстро на Экспресс , если вы еще этого не сделали.После этого добавьте экспресс:

npm install express --save

Теперь добавьте файл server.js в корневой каталог вашего проекта:

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 7070;
var hostname = '127.0.0.1';

app.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
 });

, после этого вы можете запустить:

 node server

, и ваш проект будет обслуживаться на указанном хосте и порту

Предполагается, что у вас уже есть каталог dist, если он у вас не запущен:

npm run build

inчтобы сгенерировать его, вам не нужно запускать npm run serve или npm run dev для запуска приложения Vue