Vite + Vue3 + Javascript + Electron 를 이용한 데스크탑 앱 개발 환경

 

놀자코딩

 

Vite + Vue3 + Javascript + Electron 를 이용하여 데스크탑앱 개발 환경을 설정해보자. 참고했던 문서에서는 Typescript 로 되어 있었는데, 필자는 아직 Javascript를 쓰고 싶다. ^^;

Step 1. Vite 프로젝트 생성하기

> yarn create vite
yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.7.2" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in C:\Mattabu\Study\Vue\vite-project...

Done. Now run:

  cd vite-project
  yarn
  yarn dev

Done in 12.26s.

yarn create vite 를 실행하면 프로젝트를 설정하는 프롬프트가 나온다. 프로젝트명을 vite-project로 입력하고 vue 프레임워크를 사용한다고 선택하고 variant도 Javascript( vue )를 사용한다고 선택했다.

 

Step 2. 프로젝트 폴더로 이동한 후에 Electron 모듈 및 종속성 모듈 설치

# 프로젝트 폴더로 이동
> cd vite-project

# electron 모듈 설치
> yarn add -D concurrently cross-env electron electron-builder wait-on

# 프로젝트 종속성 모듈 설치
> yarn

 

Step 3. package.json 파일 수정

build 속성 추가 (electron build에서 자세한 내용 확인할 수 있다.)

  "build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2019 ${author}",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }

 

scripts 속성 수정/추가

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",
    "electron:pack": "electron-builder --dir",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
    "electron:builder": "electron-builder",
    "build:for:electron": "cross-env ELECTRON=true vite build",
    "app:build": "yarn build:for:electron && yarn electron:builder"
  },

 

main, license, author 등 속성 추가

{
  "name": "vite-electron-app-test",
  "author": "Gauryan",
  "license": "MIT",
  "version": "0.0.0",
  "main": "electron/electron.js",
  ...
}

 

Step 4. vite.config.js 파일 수정

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: process.env.ELECTRON=="true" ? './' : ".",
  plugins: [vue()]
})

 

Step 5. electron/electron.js 파일 생성

// electron/electron.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

const isDev = process.env.IS_DEV == "true" ? true : false;

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../dist/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

 

Step 6. electron/preload.js 파일 생성

// electron/preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

 

Step 7. 개발모드 실행 및 빌드

# Run yarn electron:dev to work with electron in development mode.
> yarn electron:dev

# Run yarn app:build to build your electron app.
> yarn app:build

 

Step 8. 참고

https://dev.to/brojenuel/vite-vue-3-electron-5h4o

Vite + Vue 3 + electron + TypeScript

https://learnvue.co/2021/05/build-vue-3-desktop-apps-in-just-5-minutes-vite-electron-quick-start-guide/#setting-up-our-electron-main-js

Building a Vue 3 Desktop App with Vite and Electron