vue express 연동

이번글은 vue와 express 연동하는 글이다.

이글을 vue에 올릴지 express 쪽에 올릴지 고민하다가 express 쪽에 올리는 것이 맞을 것같아 express 쪽에 올리겠다.

 

[Node.js] express & vue 연동 1 (tistory.com)

[Node.js] express & vue 연동 1

해당 블로그를 참조 했다.

 

이 과정을 끝내면 front는 vue로 backend는 express로 구현이 가능하다.

1. frontend(vue)쪽 폴더를 연다.

2. config/index.js 파일을 열고 build의 폴더 경로를 backend(express)폴더의 public 으로 수정한다.

 

3. 그 후 frontend(vue)폴더에서 npm run build 명령어를 실행한다.

이 작업을 거치면 build가 끝나 백엔드 폴더의 public 폴더에 vue로 제작한 frontend가 추가된다.

 

4. 마지막으로 backend에서 해당 frontend를 출력할 수 있도록 해줘야 한다.

다음 처럼 백엔드에 index.js를 수정해주면 된다.

그 후 백엔드 폴더에서 npm start 명령어를 입력하면 백엔드가 돌아가면서 프론트엔드를 출력해 줄 것이다.

localhost:3000으로 접속하면 vue화면을 볼 수 있다.

 

추가) 혹시 frontend만 빌드를 하지 않고 확인하고 싶다면 npm run serve로 실행하면 된다.