vue.js와 스프링 연동하기

 

2021년 2월 3일 기준 vue spring 연동하기에 대한 글을 새로 작성했습니다!

2021/02/03 - [SERVER/SPRING] - [vue + spring] 스프링 몰라도 vue랑 스프링 연동하기

[vue + spring] 스프링 몰라도 vue랑 스프링 연동하기

 

---

 

 

vscode를 이용하여 개발할 예정!!

 

엄청 많은 블로그를 참고했기 때문에 쓸데없는 과정이 들어갈수도있다!

 

Step 1. 스프링부트 설치

https://start.spring.io/

 

스프링부트를 가볍게 설치할 수있다. 

나는 여기서 아래쪽에 검색할 때 web과 mysql를 입력하고 다운을 받았는데 이것만 다운받아도될지 아니면 필요없을지는 아직 모르겠다.

 

다 입력하고 "Generate the project"를 누르면 zip파일이 다운 받아진다. 

스프링부트가 만들어진 것이다. 원하는 workspace에 알집을 풀어준다. 

 

Step 2. vue.js 설치 

vue.js는 npm으로 설치할거다. (node.js가 설치되어있지 않다면 설치를 하고오자)

(폴더 vue는 무시해도된다 여러번 시도했을 때 실패한거라)

나는 스프링부트 폴더 내부에 frontend라는 폴더를 만들어서 거기서 vue를 설치했다.

"vue init webpack vue(폴더명)"

(vue가 설치되어있지 않다면 "npm install vue"로 vue를 설치해주자)

 

기다리면 설치가 완료된다. 

 

step 3. 환경설정

vue에서 build한 html 및 js, css를 스프링으로 옮겨줄거다. 

fontend/vue/config/index.js에서 설정할건데

이렇게 해주면된다. 

 

step 4. vue build

터미널로 vue가 있는 폴더로 들어가서 "npm run build"를 입력하면 스프링 내부에 있는 src/main/resources/static에 파일이 들어가있는것을 볼수 있다.

 step 5. 스프링 실행

이제 F5를 눌러 스프링을 실행해주자

실행이 잘되면 위와같은 화면이 콘솔창에 뜰 것이다. 그리고 홈페이지를 들어가면 화면이 잘 나오는걸 볼수있다. 

 

 

참고  https://jamong-icetea.tistory.com/207

Spring Boot와 Vue.js 연동하기