개인프로젝트로 사용하게 될 spring boot + vue.js로 개발환경을 구성해보려고 한다.
Spring Initializr로 프로젝트 생성하기
spring boot 관련 프로젝트를 생성해주는 사이트이다.
아래 GENERATE 버튼을 누르면 압축파일을 다운 받을 수 있다.
원하는 파일에 압축을 풀어준다.
터미널에서 vue 프로젝트 생성하기
vue create frontend (vue-cli 안에 명령어)로 프로젝트를 생성할 것이다.
VUE CLI (뷰 명령어 인터페이스 Command line interface) 란?
vue-cli 는 기본 vue 개발 환경을 편하게 설정해주는 도구입니다. 명령어로 기본적인 프로젝트 세팅을 대신 해줍니다.
vue-cli 를 설치해주려고 했으나 실패!
npm install -g @vue/cli
sudo npm install -g @vue/clisudo 붙이니까 성공했다.
cd frontend
npm run serve
vue 빌드시 스프링부트에 정적 폴더로 디플로이 작업
vue 수정시 자동으로 컴파일되도록 하기 위하여 수정이 필요하다.
package.json 파일에 scripts 부분 수정
"serve": "vue-cli-service serve" => "serve": "vue-cli-service serve --port 3000"
"build": "vue-cli-service build" => "build": "vue-cli-service build --watch"vue router 설치
vue 프로젝트 폴더에서 명령어 입력
vue add router
다시 켜보면 상단에 라우터가 생성된 것을 볼 수 있다.
router 사용을 위해 스프링부트에 ErrorController를 implements하여 아래 내용을 구현해 준다.
package com.example.memo.common.controller;
import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class WebErrorController implements ErrorController {
@GetMapping("/error")
public String redirctRoot() {
return "index.html";
}
public String getErrorPath() {
return "/error";
}
}
참고
spring initializr 사용하기
https://while1.tistory.com/m/104
spring boot vue.js 환경 구성하기
https://velog.io/@-dev-/spring-boot-vue.js-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0
vue router 설치