[Spring Boot-Vue] 프로젝트 빌드

[Spring Boot-Vue] 프로젝트 빌드

 

작성일자 : 2019.07.21

환경 : Vue 2.6.10, Vue-Cli 2/3, Spring Boot 2.1.6, npm 6.9.0, webpack 3.12.0

목표 : Spring Boot - Vue 구조의 프로젝트를 빌드하여 하나의 jar파일을 생성

 

0. Vue / Spring Project 세팅

 

- vue 버전 확인

npm list vue

 

- vue-cli 버전 확인

vue --version

 

- vue-cli에서 프로젝트 생성

vue cli 2.X :

  vue init webpack 'ProjectName' 

vue cli 3.X :

   vue create 'ProjectName'

1. vue 프로젝트 빌드

 

- 빌드할 대상은 vue-cli로 생성한 Default 프로젝트 ( 추가 설정 X )

 

 

Build 명령어

 

- vue cli 2.X :

%VueProjectRootPath% > npm run-script build

- vue cli 3.X :

%VueProjectRootPath% > npm run build

 

Default 설정 시 빌드 후 %VueProjectRootPath%\dist에서 빌드 결과물을 확인 가능

 

 

 

빌드 결과물을 %SpringBootProjectRootPath%\src\main\resources\static 밑으로 이동

 

 

해당 과정까지 진행 시 Spring Boot 서버 실행 후 /로 접근 시 vue 화면에 접근 가능

 

 

2. Spring Boot 빌드

 

빌드할 대상은 SpringBoot Default 프로젝트 ( 추가 설정 X )

 

Build 명령어

 

%SpringBootProjectRootPath%> gradlew build

 

 

Default 설정 시 빌드 후 %SpringBootProjectPath%\build\libs에서 빌드 결과물을 확인 가능

 

 

3. 확인

 

결과물 실행

 

%SpringBootProjectPath%\build\libs> java -jar buildtest-0.0.1-SNAPSHOT.jar

 

 

 

jar 파일 실행 후 / 접근 시 vue 기본화면 확인 가능

 

 

---

 

++

실행 시 java, javaw 명령어 차이

java는 cmd창에 콘솔로그가 찍히며 cmd 종료 시 프로세스 종료

javaw는 백그라운드로 실행 

 

++

Vue Project Build 결과물 경로 설정 방법

vue cli 3.X 으로 생성한 Vue Project 일 시

 

ROOT 밑에 vue.config.js 파일 추가

const path = require("path");   module.exports = {   outputDir: path.resolve(__dirname, "../src/main/resources/static"),   //   assetsDir:  "./"  - asset 폴더 위치 설정 }