[ Electron + Vue ] 초기 환경 세팅

Desktop app 을 만들때 Electron 을 활용하여 만들 수 있다는 것을 알고,

한번 만들어보기로 도전

 

개발 환경은 Vite + Vue + Typescript + Electron를 활용

---

Initalized

우선 vite + vue + typescript 프로젝트를 생성

 

이후 electron을 설치

npm install electron --save-dev

 

그리고 루트 프로젝트에서 electron 폴더를 만들고 main.js파일을 생성

이때 win.loadURL은 vite 포트랑 동일하게 세팅

 

electron의 main.js에서 ts로 하고싶었지만 ts로 할려니까 이것저것 세팅을 추가로 해줘야하고, 잘 안되어서 js로 그냥 진행

import { app, BrowserWindow } from 'electron';
import { join } from 'path';

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });

    const isDev = !app.isPackaged;
    if (isDev) {
        win.loadURL('http://localhost:5173'); // Vite 서버 로드
    } else {
        win.loadFile(join(__dirname, '../dist/index.html')); // 빌드 후 HTML 파일 로드
    }
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit();
});

 

BrowserWindow가 desktopApp 설정 부분이며, width와 높이를 설정하여 초기에 나오는 윈도우 크기를 정할 수 있다.

 

이후 package.json에서 electron 실행 명령어를 세팅해준 후

실행시 electron의 main을 설정해줘야하기 때문에 electron/main.js로 세팅

"main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "electron": "npx electron .",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },

---

Started

electron은 우선 vite서버와 연결이 되어야하므로 vite서버를 먼저 실행시켜준 후

electron을 실행시켜준다.

npm run dev
npm run electron

 

그럼 이제 웹사이트와 desktop app 둘다 같은 화면이 보이는 것을 확인