java spring + vue 설정하기

자바 스프링에 vue를 올려서 개발해야 할 프로젝트가 생겼다.

기본적으로는 따로 프로젝트를 구성해서 합해야 한다고 생각했지만..

그러지 않고 자바 프로젝트 안에 vue프로젝트를 만들어줘서 한번의 배포로 편하게 하는 방법이 있었다.

스프링 포트는 8081 뷰 포트는 8080으로 쓰면서 필요한 api 요청만

/api로 보내 프록시를 이용한 방법이다.

 

먼저 스프링 프로젝트를 생성해 준다.

나는 이미 프로젝트가 있으므로 생략.

 

vue를 설치 해야 한다.

 

npm install -g @vue/cli

 

스프링 루트 폴더에서 폴더 이름을 정하여 새로운 vue 프로젝트를 터미널로 생성해 준다.

나는 frontend 로 정해서 설치했다.

vue create frontend

설치 할때 3x 2x 메뉴얼이 나오는데 메뉴얼로 설치 했다.

* 메뉴얼 메뉴에서 vuex 와 router를 설치해주고 히스토리 모드 스탠다드 문법을 선택한다. 

나중에 뷰티파이 설치를 위해서 2x 버전으로 설치한다. 아직 뷰티파이가 3x 버전을 지원하지 않는다.

 

스프링의 기본 포트를 바꿔준다. 위치는 스프링 리소스 폴더의 application.properties 파일이다.

 

server.port = 8081

 

설치를 마친후에 vue 루트 폴더의 vue.config.js 파일을 편집한다.

 

module.exports = {
  // 빌드 타겟 디렉토리
  outputDir: '../src/main/resources/static',

  devServer: {
    proxy: {
      '/api': {
        // '/api' 로 들어오면 포트 8081(스프링 서버)로 보낸다
        target: 'http://localhost:8081',
        changeOrigin: true // cross origin 허용
      }
    }
  },

이제부터 자바와 통신하기 위해서는 /api로 통신을 시도하면 된다. 

 

뷰티파이를 설치하자 

vue add vuetify

 

뷰티파이 설치 후 npm run serve 로 실행하면 애러가 나는것을 볼 수 있다.

vue 루트 폴더의 package.json 파일 rules에 다음을 추가하자.

 

"rules": {
      "vue/multi-word-component-names": 0
    }

 

다음 axios를 설치해야 하는데 그냥 하면 애러가 날 가능성이 높으므로 --force 옵션을 붙여서 설치해준다.

 

npm install axios --force

 

이와 같이 마치면 기본적인 설정은 끝난다.