Vue 앱 서버와 Express를 결합하는 방법

Vue 앱 서버와 Express를 결합하는 방법

실행 중인 vue 앱이 있습니다.http://localhost:8080/(Vue CLI 경유) 및 Express에서 실행되는 백엔드:http://localhost:7070프런트엔드와 백엔드를 동일한 주소로 실행할 수 있습니까(Vue CLI 서버에서 핫모듈 교환이 손실되지 않음).

필요한 것은 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 이외의 장소에 배치해야 하는데 어디에 있는지 잊어버렸습니다.만약 이것에 문제가 있으면, 저에게 물어보세요.제가 확인해 보겠습니다.

Vue는 프런트 엔드 라이브러리일 뿐이므로 Vue를 호스트하고 자산을 서비스하는 가장 쉬운 방법은 미니 웹 서버를 시작하는 데 사용할 수 있는 간단한 Express 친화적인 스크립트를 작성하는 것입니다.Express에서 아직 읽지 않은 경우 빠르게 읽어 보십시오.그런 다음 express를 추가합니다.

npm install express --save

이제 a를 추가합니다.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

데이터를 생성하기 위해 실행할 필요가 없습니다.npm run serve또는npm run devVue 앱용

언급URL : https://stackoverflow.com/questions/53944935/how-to-combine-vue-app-server-and-express