시작하기 전에
- 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화면이 나오는 것을 볼 수 있다
'Vue > Vue' 카테고리의 다른 글
5. get방식 통신 (Vue + Springboot 연동 3) (0) | 2021.11.18 |
---|---|
4. axios & vuetify (Vue + Springboot 연동 2) (0) | 2021.11.18 |
2. Vue.js 시작하기 (0) | 2021.11.17 |
1. Vue.js 의 구조와 빌드하기 (0) | 2021.11.14 |
0. Vue.js (0) | 2021.11.14 |