Vue.js와 SpringBoot 연동하기

오늘은 스프링부트에 뷰.js를 설치하고 연동해보는 시간을 가져보았다.

 

우선 스프링부트 프로젝트를 설치하는건 넘기고 Vue.js를 설치하는 단계부터 한다.

 

인텔리제이 기준으로 설명하겠다.

 

우선 인텔리제이 상에서 터미널을 킨다.

 

그리고 이코드를 입력한다.

 

npm install -g @vue/cli

 

참고로 npm과 node.js가 설치가 되어있어야한다.

 

설명은 vue-cli를 글로벌하게 설치하겠다는 의미이다.

 

설치가 완료되고나면 vue --version쳐보면 버전이 나올것이다.

 

그러고 난뒤 vue.js를 프로젝트안에 설치할것이다. 이 줄을 입력하자.

 

vue create frontend

 

프로젝트안에 frontend라는 이름의 vue 프로젝트를 설치하겠다는 뜻이다.

 

또한 뷰 버전을 어떤걸로 고를것인지 뜰것이다. 나는 vue3을 선택했다.

 

입력하면 프로젝트안에 frontend 패키지가 있을것이다.

 

cd frontend로 vuejs패키지에 들어간후 npm vue serve를 입력하면 vue.js가 실행될것이다. 끄는 방법은 ctrl+C를 누르면 된다.

 

이제 스프링 부트와 연동하는 방법에 대해 설명한다.

 

frontend/package.json에 들어간다. 그러면 json 형태의 데이터들이 있을텐데 처음에는 이런 형태의 스크립트가 있을것이다.

 

"scripts": {
    "serve": "vue-cli-service serve" ,
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

 

스프링부트와 연동하기위해서는 8080포트가 겹칠것이다. 그것을 바꿔보자.

 

"scripts": {
    "serve": "vue-cli-service serve --open --port 3001" ,
    "build": "vue-cli-service build --watch",
    "lint": "vue-cli-service lint"
  }

open은 서버가 켜질때 브라우저가 같이 열릴수 있게 하는것과 포트는 8081로 바꿔지게 하였다.

 

그리고 build에 watch는 vue가 수정이 되었을때 자동으로 컴파일 될 수 있게 해주는 옵션이다.

 

그리고 vue.config.js를 들어간다. 그리고 초기상태의 코드는 이럴 것이다.

 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
	}
)

 

아래 내용으로 바꿔주자.

 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // npm run build 타겟 디렉토리
  outputDir: '../src/main/resources/static',

  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정
  devServer: {
    proxy: 'http://localhost:8080'
  }
})

 

빌드시에 나오는 내용들을 저 폴더안으로 내려줄것이고 포트를 자동적으로 8080포트에 넣어줄것이다.

 

그리고 마지막으로 터미널에 아래 내용을 입력해준다.

 

npm run build

 

그러면 빌드가 되면서 파일들을 리소스에 뿌려주고 수정 내용을 계속 자동적으로 컴파일 해줄것이다. 끄기 위해서는 똑같이 컨트롤+C를 눌러주면 꺼진다. 이제 서버를 실행시켜주면 vue 화면이 자동적으로 출력이 된다.