(타슈켄트) 뷰> Spring Boot 에서 Vue.js 설정하기

spring boot + jpa 설치가 성공한 후 브라우저 초기화면이 Hello JPA !! 가 출력한 이후에 진행합니다.

STS Market 에서 vue plugin 설치합니다.

// npm install -g yarn

 

위 화면에서 시작해야 함... 경로 중요

open gitbash

vue --version 

// npm uninstall -g vue-cli 

// 이전에 설치한 것이 있을 때만

// npm install -g @vue/cli@3.0.1 2019 10월에 변경됨

// 3.0.1 반드시 체크 이후 버전은 deprecate 되어서 다른 방식으로 설치해야 함...

!! 아래 방식으로 바꿀것

 

방식 1

npm install -g @vue/cli

npm install vue-router

npm install vuex

npm install --save vuex es6-promise

npm install --save axios

npm install --save vue-element-loading

vue create vue

 

방식 2

yarn global add @vue/cli 

yarn add vue-router

yarn add vuex

yarn add vuex es6-promise

yarn add axios

vue create vue

 

 

cd vue

npm run dev

3 ~ 5 분 소요

 

 

localhost:8080 을 브라우저에 입력 엔터

welcome 화면 뜨면

cmd(gitbash) close

sts open

 

 

여기서 이곳으로 갈것

 

 

 

 

 

 

메이븐 업데이트 후 8080은 여전히 아래와 같다.

아래처럼 코드를 고쳐서 변화가 적용되는 것을 체크한다.

 

위 화면이 현재 작동되는 상황에서 !!! 주의 -- 스프링부트가 켜있는 상황에서 할 것 

 

 

 

위 화면에서 웹팩 진행 완료.. 컴파일 100 % 확인 해야함

 

로컬호스트 포트가 8081 진행으로 열린 것을 확인할 것... 자동으로 1씩 증가함

 

 

▶▶▶ FINAL BUILD 

check new folder vue

vue> config > index.js click

go line 45 ~ 50 아래 처럼 변경 

build: {

// Template for index.html

index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),

 

// Paths

assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),

assetsSubDirectory: 'static',

assetsPublicPath: '/',

 

터미널에서 cd frontend/build

npm run build

 

빌드 종료 후

spring boot 실행 하면 vue welcome 화면으로 전환

 

 

 

 

 

 

 

 

빌드 종료하는 화면

 

build 후 새로 생긴 파일