[Vue.js][Spring Boot] Spring Boot, Vue 연동하기 - 프로젝트 구조

dhkim 2월 16, 2021


프론트엔드로 Vue.js를 사용하고,

백엔드로 Spring Boot를 사용할 때

프로젝트 구성방법에 대해 설명합니다. (개발툴 : Eclipse / Visual Studio Code)


1. 프로젝트 구조 및 간단한 원리

Vue 프로젝트의 빌드 출력물을 Spring Boot의 Static 폴더에 저장한다.

따라서, 다음과 같은 순서로 웹페이지가 로드된다.

① Vue 프로젝트 빌드

② Spring Boot 실행 (빌드)

③ 접속 (Spring Boot의 Static폴더 Vue 출력물을 실행)



2. 프로젝트 구성

  Spring Boot 내부에 Vue 프로젝트를 위치시킨다.
  Vue 프로젝트 생성 명령어 (vue init webpack ["프로젝트명"]) 실행 시 front하위 경로로 설정해야함에 주의한다.

3. Vue.js 프로젝트 설정

  Vue 프로젝트의 빌드 출력 경로를 Spring Boot의 정적폴더 위치로 설정한다.
  (위치는 "2. 프로젝트 구성"의 "static"폴더이므로, 경로 설정 시 참고)

index: path.resolve(__dirname, '../../../src/main/resources/static/index.html')
assetsRoot: path.resolve(__dirname, '../../../src/main/resources/static')



4. 실행과정

1) Vue 프로젝트 빌드 (명령어 : npm run build)


 2) Vue 프로젝트 빌드 출력물 확인

 Spring Boot의 Static 폴더에 Vue 프로젝트 빌드 출력물이 생성되었는 지 확인한다.



3) Spring Boot 실행



4) URL 접속 (localhost : 지정포트)






1 댓글

  1. Unknown2021년 7월 6일 오후 3:25

    안녕하세요~ ! 깔끔하고 친절한 게시글 잘 봤습니다 감사합니다.
    따라하다가 vue 빌드에서 오류를 계속 맞닿드려서요ㅠ

    front(프로젝트 폴더) / package.json 의 문제인데요,
    npm ERR! enoent this is related to npm not being able to find a file.
    a complete log of this run can be found in : debug.log

    구글링해보니 작업관리자에 있는 node.js 관련 process 종료 후 package.json파일을 삭제 하고 다시 설치하라고 해서 해보았는데 똑같은 오류만 나오네요 ㅠㅠ...

    답글삭제