3. Vue + Springboot 연동 1

시작하기 전에

• Springboot 와 Vue를 쉽게(?) 연동하기 위해서 security를 구현하기 전 프로젝트를 사용
• Vue.js 에서 Vuetify를 사용하기 위해서 2버전을 사용했다
• Router 추가. vue add router를 터미널에 입력하여 추가 (default로 설치했기 때문)

 

 

 

proxy & 빌드위치 변경

---

-- vue.config.js --
module.exports = {  
  outputDir: "../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");  
  }  
};

 

참고로 proxy 부분은  application.properties에서 설정했던 서버 포트와 같게 설정해야한다.

• outputDir은 npm run build로 빌드 시 파일이 생성되는 위치
• indexPath는 index.html 파일이 생성될 위치를 지정
• devServer는 Back-End , 즉 Spring Boot의 내장 was의 주소를 작성하면 된다

 

 

터미널에서 src/frontend위치에서 ' npm run build ' 명령어를 입력하여 실행하면

build가 완료되고 main의 resources 부분에 static디렉토리가 추가된 것을 볼 수 있다

빌드가 완료되면 다음과 같은 화면이 나온다

이제 Springboot를 실행하고 localhost:8080주소에 접속해보면 Vue화면이 나오는 것을 볼 수 있다