Spring boot + REST API + vue.js(1)

spring boot + vue.js + rest api

이조합을 선택한 이유는 개발중인 앱이 REST API를 사용하고 있었고 웹뷰가 필요해서 Spring boot + REST API + Vue.js 조합으로 웹을 만들게됐다 :)

---

1. Spring boot project 생성

project 생성

 

Dependencies 선택

 

project 생성완료!

 

 

---

2. vue create [name]

npm install -g @vue/cli

 

vue create front

우선 projcet src 밑에 vue를 생성했는데 문제가 생기면 projcet 바로밑으로 이동할 수도있을것같다.

 

default로 진행

 

front 폴더가 생겼다!

 

vue.config.js file을 생성한다.

 

front폴더에 vue.config.js file을 생성한 후 이렇게 입력하고 저장

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");  
  }  
};

outputDir, indexPath,

devServer: spring boot의 내장 톰캣 경로

 

 

 

npm run build

font 폴더에서 npm run build

 

build 후 static에 폴더들이 생성된 모습!

 

 

---

3. 실행

Maven -> Update Projcet...

 

 

Force Update of Snapshots/Releases check

 

spring boot server start!

 

http://localhost:8080 접속!

yarn serve -> 8081 접속

App.js 수정해보기

 

---

4. ERR

http://localhost:8080 로 접속했더니 Error를 만났다.

err를 보니 Not Found다. 그래서 vue.config.js를 봤더니 inputPath에 적어논 index.html이 없어서 그 경로에 index.html을 만들어줬다. 그리고 다시 실행!