SpringBoot에서 Vue.js를 연동하고 실행해보자

구현해 볼 것

프로젝트를 진행하던 중 Vue.js를 SpringBoot에서 사용해야 하는 경우가 생겼습니다.

따라서 Vue.js를 프로젝트를 기존에 진행하고 있던 spring Boot 내에서 설치하여 배포하려고 합니다.

 

설치 방법

먼저 vue프로젝트를 설치해보겠습니다.

깔끔하게 보기 위해서 Spring Boot 프로젝트에 vue 폴더를 생성한 후 진행하겠습니다.

생성하는 방법은 리눅스 mkdir 명령어를 사용하도록 하겠습니다.

mkdir vue

 

 

그러면 아래와 같이 vue 폴더가 생깁니다.

 

 

그럼 이 vue 폴더에서 작업을 하기 위해 vue 폴더로 디렉터리의 위치를 변경하겠습니다.

변경 명령어는 cd 디렉토리명입니다.

cd vue

vue 폴더로 이동

 

그다음 vue 프로젝트를 만들어 주기 위해 아래 명령어를 시작해 줍니다.

vue init webpack vue-front

 

 

화면이 뜨면 아래와 같이 선택해 주시면 됩니다.

설치 선택

설치 완료

 

 

그러면 vue 폴더에 여러 개의 폴더와 파일들이 생기는데 

그중 vue-front 폴더 -> config 폴더 ->index.js 파일을 눌러줍니다.

 

 

 

index.js 파일 내에 있는 아래와 같은 build 부분을 찾아줍니다.

이유로는 vue 프로젝트를 빌드한 경우 html 파일 등을 spring Boot로 이동시키기 위함입니다.

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

 

찾으셨으면 아래와 같이 수정해 주시면 됩니다.

 build: {
    index: path.resolve(__dirname, '../../../src/main/resources/templates/vue/index.html'),

    assetsRoot: path.resolve(__dirname, '../../../src/main/resources/static/vue'),
    assetsSubDirectory: 'static',
    assetsPublicPath: 'vue/',

 

 

그러면 한번 빌드해보도록 하겠습니다.

 

빌드 방법

현재 vue 폴더에서 vue-front라는 프로젝트를 만들어 주었습니다.

따라서 vue-front로 이동한 후 빌드 해주시면 됩니다.

cd vue-front

 

빌드 명령어는 npm run build입니다.

npm run build

 

빌드 방법

 

 

빌드 완료

 

build 가 성공하시면 아래와 같이 resources 부분에 파일들이 생긴 것을 확인하실 수 있습니다.

 

 

 

 

실행 방법

Spring 내에서 컨트롤러를 구현하신 후  index.html을 불러와주시면 실행이 되며

수정 중 빠르게 테스트해보고 싶으신 분들은 vue-front 폴더에서 npm run dev로 실행해 보셔도 됩니다.