문득 electron에 손을 내려고 하면 도화에 빠졌기 때문에 기록으로 남겨 둡니다. 결과를 쓰면 선인들의 블로그와 토론을 읽고 해결했습니다.
※ Win판의 build에 실패하고 있습니다만, 아마 wine가 필요같다? 빨리 build의 필요가 없기 때문에 해결하면 나중에 추가합니다.

나는 평소 WSL상에서 vue.js(typescript)로 개발하고 있습니다. electron을 만지고 싶었기 때문에, vue.js(vue-cli3) + WSL로 환경 구축해 보았습니다.

vue의 electron 플러그인으로서 vue-cli-plugin-electron-builder를 이용하고 있습니다.

nklayman/vue-cli-plugin-electron-builder

WSL GUI 환경 구축

electron은 데스크톱 응용 프로그램이므로 GUI 환경이 필요합니다. wsl에 다음을 설치하십시오.

$ sudo apt-get install libgtk-3-dev libxss1 libnss3-dev libasound2 x11-apps x11-utils x11-xserver-utils fonts-ipafont

Windows 측에 X Server를 구축하므로 환경 변수 DISPLAY에 다음을 대입합니다.
이것은 ~/.bashrc 나름 ~/.zshrc 나름의 쉘 설정 파일에 기재해 주세요.

export DISPLAY=localhost:0.0

Windows에서 X Server 환경 구축

여기에서 VcXsrv를 설치했습니다.
ｈｔｐｓ：／／그래서 넉넉하다. 네 t/p로지ぇcts/vcxsrv/

vue 프로젝트 만들기

vue-cli3에서의 프로젝트 작성은 생략합니다.
프로젝트를 만든 후 다음 명령으로 electron 플러그인을 추가합니다.

$ vue add electron-builder

플러그인을 추가한 후 서버를 시작합니다.sudo 그렇지 않으면 실패합니다.

$ sudo yarn electron:serve

할 수 있었습니다.

다음 작업 로그

라이브러리 설치

$ vue add electron-builder
$ yarn electron:serve

라이브러리가 없으면 오류가 발생합니다.
※이후 잠시 의존해결을 실시한다.

libgtk-3.so.0

error while loading
shared libraries: libgtk-3.so.0: cannot open shared object file: No such file or directory

$ sudo apt-get install libgtk-3-dev

libXss.so.1

error while loading
shared libraries: libXss.so.1: cannot open shared object file: No such file or directory

$ sudo apt-get install libxss1

ぃ bnss3. 그

error while loading
shared libraries: libnss3.so: cannot open shared object file: No such file or directory

$ sudo apt-get install libnss3-dev

libasound.so.2

error while loading
shared libraries: libasound.so.2: cannot open shared object file: No such file or directory

$ sudo apt-get install libasound2

X Server

(electron:21834): Gtk-WARNING **: 22:13:07.994: cannot open display:

뭐야 이 에러…라고 조사하면 아무래도 GUI의 설정이 되어 있지 않다고 하는 에러인 것 같습니다(그렇다고 한다).

electron의 근원이 되고 있는 chromium의 토론에서 같은 질문을 하고 있는 사람이 있어 알아차린다.

Lanuching chromium-browser on Centos throws: Gtk-WARNING **: cannot open display

아래 사이트를 참고하여 VcXsrv를 설치.

Windows Subsystem for Linux (WSL)에서 Electron

sudo apt-get install x11-apps x11-utils x11-xserver-utils fonts-ipafont

export DISPLAY=localhost:0.0

$ sudo yarn electron:serve

할 수 있었다.

※ build 할 수 있으면 추기합니다.