커스텀 dev/prod 서버에서 vue cli 서비스 기능을 활용하는 방법

커스텀 dev/prod 서버에서 vue cli 서비스 기능을 활용하는 방법

vue cli 3 rc3를 사용하여 작업 중인 vue 프로젝트를 가지고 있으며 온라인 상의 많은 튜토리얼 중 하나를 사용하여expressheroku에서 파일을 처리하는 서버. 단, 이러한 튜토리얼 중 빛나는 새 파일을 얻는 방법은 없습니다.server.js개발에도 도움이 됩니다.이것이 정적 자산에 맞춘 것이 아니라, 헤로쿠와 같은 것에 전개하는 요점이 될 것이라고 생각합니다.

확실히 난 그걸 버릴 수 있어npm run serve명령어는 CLI에서 제공되며 전용 서버만 사용되지만 핫 로딩 및 기타 놀라운 기능은 손실됩니다.

다른 프로젝트를 작성할 수도 있지만(일반적이라고 생각합니다만), 백엔드와 프런트엔드가 코드를 공유해 주었으면 합니다.

일주일 동안 이걸 알아내려고 노력했어요 심지어 복제하는 게 얼마나 어려울지 보기 위해 기써브에 있는 CLI 코드를 읽기도 했죠

Webpack은 Webpack-dev-middleware를 통해 기능을 제공하지만 현재 사용하려고 하면 설정 오류가 발생하고 동작하지 않습니다.아마 vue cli가 제공하는 기본값이 부족하기 때문일 것입니다.

이런 게 통할 것 같은데...

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');

const app = express();

if (process.env.NODE_ENV === 'production') {
  app.use('/', serveStatic(path.join(__dirname, '/dist')));
  app.get('*', function(req, res) {
    res.sendFile(__dirname + '/dist/index.html');
  });
} else {
  // TODO: Find/create some middleware that does
  // everything that vue-cli-service serve does
  // app.use(require('vue-dev-middleware'));
}

const port = process.env.PORT || 8080;
app.listen(port);

안내할 사람 있나요?

vue.config.filename 파일에 저장

const configureAPI = require("./src/server/configure");

module.exports = {
  devServer: {
    before: configureAPI,
    disableHostCheck: true
  }
}

express js 파일

//src/server/configure.js file
module.exports = app => {
    //do stuff
  }

위의 코드는 express 서버에서 vuejs를 실행합니다.바꿔 말하면

npm run serve

expressj를 실행합니다.

vue.config.flash에 대한 자세한 내용은 https://cli.vuejs.org/config/ 에서 확인할 수 있습니다(예를 들어 포트 설정 방법, 포트 설정 방법 등).

언급URL : https://stackoverflow.com/questions/50996730/how-can-i-leverage-vue-cli-serve-functionality-with-my-custom-dev-prod-server