[Electron] Vue-Cli 기반 프로젝트로 Electron 앱 빌드하기(Vue CLI Plugin Electron Builder)

안녕하세요☺️

지난 포스팅에서 Electron-Builder를 이용하여 일렉트론 앱을 Windows 용으로 빌드하는 내용을 설명했었습니다.

가이드 문서를 읽어보던 중 Electron-Builder에서 Vue-Cli를 기반으로 한 빌드 방법을 제공하는 보일러 플레이트가 있다고 공유를 드렸는데요, 오늘은 해당 보일러 플레이트를 적용해보려고 합니다.

 

Vue-Cli를 이용하여 Vue 프로젝트 생성

다음은 Vue-Cli를 이용하여 Vue 프로젝트를 스케폴딩하는 명령어입니다.

저는 vue-cli-plugin-electron-builder-app이라는 프로젝트를 생성하였습니다.

vue create vue-cli-plugin-electron-builder-app
# vue create vue-cli-plugin-electron-builder-app --registry https://registry.npmjs.org/

프로젝트가 생성되면, 해당 디렉터리로 이동하여 프로젝트를 실행해주면 됩니다.

cd vue-cli-plugin-electron-builder-app
npm run serve

 

프로젝트가 실행되면 아래와 같이 Vue 기반의 프로젝트가 정상적으로 실행되는 것을 확인할 수 있습니다.

 

Electron-Builder 추가하기

Vue-Cli 프로젝트가 생성되었다면, 아래 명령어를 통해 Vue-Cli 용 Electron-Builder를 추가해주면 됩니다.

vue add electron-builder
# vue add electron-builder --registry https://registry.npmjs.org/

위 명령어 실행시, 몇 가지 코드가 프로젝트에 추가되는 것을 확인할 수 있습니다.

 

그다음 아래 명령어를 통해 일렉트론 앱을 빌드할 수 있습니다.

npm run electron:serve

앱을 빌드하면 아래처럼 일렉트론 앱이 실행이 됩니다.

 

생각보다 너무 간단하게 Vue-Cli 기반의 일렉트론 앱을 스케폴딩 할 수 있게 해 줘서 조금 놀랐습니다😅

사실 Vue 기반의 Electron 앱 구조를 어떻게 잡아야 할까 써치를 많이 해보았었는데, VCP Electron-Builder를 이용하면 아주 간단하게 구조를 잡을 수가 있었습니다.

 

그렇지만 단점이라면 현재(2022년 1월) 일렉트론 Stable 버전이 16인데,  VCP Electron-Builder는 11, 12, 13 버전만 선택이 가능했다는 것입니다. Electron 최신 버전을 사용하기 위해서는 VCP Electron-Builder를 사용할 수가 없었습니다. 

 

일렉트론의 최신 버전을 이용하지 않아도 된다면 VCP Electron-Builder를 이용하여 패키징을 하는 것도 괜찮은 것으로 보여서 조금 더 써치를 해보며 구조는 고민을 해봐야 할 것 같습니다.

 

 

 

 

Reference

• https://cli.vuejs.org/guide/creating-a-project.html#vue-create
• https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/