Spirng Boot Vue.js 연동하기

vue.js로 브라우저의 localdatabase를 이용해서 CRUD가 가능한 Todo List 프로젝트를 하나 만들어봤고,

이제는 Vue.js+SpringBoot를 연동해보려고 한다

1) vue CLI로 아래 명령어를 실행하여 vue프로젝트를 생성한다 (webpack기반)

vue init webpack frontend

2) 그 다음 SpringBoot의 기본 view경로를 맞춰준다. 

생성한 뷰 프로젝트의 config > index.js > build 부분을 수정한다.

빌드후 SpringBoot의 어느경로에 결과물을 만들거냐는 경로임

참고로 에디터는 아톰을 이용했다.

2) 만들어진 vue프로젝트를 boot프로젝트 폴더 안에 넣어 준다. 

3) 그리고 커맨드로 해당 내가만든 vue프로젝트까지 간후 vue를 빌드해준다

npm run build

4) 결과 확인

정상적으로 빌드에 성공했다면 아래와같은 프로젝트 구조가 된다.

http://localhost:8080/를 통해서 화면까지 확인하면 끝.