SpringBoot Vue 3 환경설정

오늘은 Springboot 와 Vue 3 를 환경셋팅을 하는 방법을 포스팅합니다.
예전에도 한번 셋팅을 했었는데 오늘 다시 할려니 대략 난감 ㅠ. ㅠ
그래서 적어볼려고 합니다.

위와 같이 제 프로젝트 내에 vue 관련 프로젝트를 생성하고자 합니다.

vue create frontend

위와같이 입력을 하면 vue 프로젝트가 생성이 됩니다.

 VUE 관련 프로젝트가  생성이 된 모습입니다.

프로젝트 구조에 생성된 모습은 위와 같습니다.

기본적으로 필요한 모듈 2개만 추가했습니다.

package.json 

저는 IntelliJ에서 Vue를 같이 개발해야하므로 아래와 같은 plugin을 설치합니다.

역시나 제가 정말 좋아하는 개발툴입니다.
이전 블로그에 기록된 것들을 보면 config 폴더에다가 지정을 했는데 새로 바뀌어서 그런지 config폴더는 생성되어있지 않습니다.

Vue  프로젝트 상단에  vue.config.js 파일을 하나 생성해 줍니다.

module.exports = {
    outputDir:"../src/main/resources/static",
    indexPath:"../static/index.html",
    devServer:{
        proxy:  'http://localhost:8080'
        },
    chainWebpack: config =>{
        const svgRule = config.module.rule("svg");
        svgRule.uses.clear();
        svgRule.use("vue-svg-loader").loader("vue-svg-loader");
    }
};

outputDit : npm run build 로 빌드시 파일이 생성되는 위치 
indexPath : index.html 파일이 생성되는 위치
devServer : SpringBoot 의 내장 WAS 주소 

파일이 생성되고 나면 npm run build 명령어를 통해 빌드 실행 

vue npm run build static folder 

static  폴더내에 이렇게 생성이 됩니다.
Springboot 를 실행하시고 이제 주소창에 localhost:8080을 호출해봅니다.

정상적으로 연동되는 것을 확인했습니다.

이런 기록이 다음에는 삽질을 안하는 길이길 바라면서 오늘 포스팅은 여기에서 마칩니다.
다음에는 VUE 를 공부하면 연동하면서 알게되는 것을 포스팅하도록 하겠습니다.