필요 환경

  • node js
  • vue
  • vue/cli

환경

  • Windows 10
  • node v18.12.1
  • npm v8.19.2
  • yarn v1.22.19
  • vue
  • vue/cli v5.0.8

vue 프로젝트 생성

vue create vubell

세부 선택은 아래와 같다.

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)

electron-builder 설치 (vue-cli-plugin-electron-builder)

cd vubell
vue add electron-builder@alpha
#electron version은 16을 선택했다.
Choose Electron Version ^16.0.0

vue-cli-plugin-electron-builder는 vue와 electron을 연동하기 위한 package.json, module 등을 자동으로 추가해 주는 plugin이다.

https://nklayman.github.io/vue-cli-plugin-electron-builder/

문제는, 2022.12.17 electron-builder의 버전은 2.0.0인데 이는 node 17 버전까지만 지원하여 설치할 때 오류가 발생한다. 다행히 3.0.0 alpha 는 node 18을 지원하여 alpha 버전이라도 설치하여 진행한다.

설치가 완료되면 package.json의 scripts 영역에 

    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",

가 추가된 것을 볼 수 있다. yarn electron:serve를 실행하면

vue-dev-tools 까지 설치되어 있다구!

혹시라도 “Error: The project seems to require yarn but it’s not installed” 오류가 발생한다면 http://blog.defree.co.kr/?p=79 를 참고하길 바란다.

프로그램을 종료해도 node 프로세스가 계속 살아있어..

vubell(electron)을 종료해도, command에서 Ctrl+c 로 종료해도 node.exe 프로세스가 살아있고 해당 프로젝트 디렉토리와 파일에 파일 핸들을 갖고 있는 상태일 때가 있다. 그래서 프로젝트 디렉토리를 지우거나 이름을 변경할 수 없게 된다.

이럴 땐 command 창에서 아래의 명령어를 입력해보자.

taskkill /f /im node.exe