[ Electron + Vue ] Electron Build ( Window / Mac OS )

실제 다른 사용자들이 사용할 수 있게 하기 위해서 만든 electron app을 build 작업을 진행

우선 electron을 빌드를 하기 위한 순서는 Vite + Vue를 사용하고 있기때문에

Vite Build 후 build된 vue를 포함해서 다시 electron을 build한다.

---

Vite Build

우선 vite프로젝트를 build하기 위해서 build option을 설정

js와 css파일은 하나로 만들어서 사용

base는 './'으로 설정해야 build후 index.html에서 js와 css파일을 상대경로로 정상적으로 가져온다.

base: './',
  build: {
    sourcemap: 'inline',
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        entryFileNames: 'your-project.js',
        assetFileNames: (assetInfo) => {
          if(assetInfo.name?.endsWith('.css')) {
            return 'your-project.css'
          } else {
            return 'assets/[name][extname]'
          }
        }
      }
    }

  },

 

이제 vite 프로젝트를 build하면 dist폴더에 build 된 vite프로젝트가 생성된다.

---

Electron Build

electron build는 electron-builder를 사용

npm install electron-builder

 

이제 electron build option을 세팅

루트 프로젝트에 electron폴더를 만들었기 때문에 경로를 그거에 맞춰서 설정해준다.

이후 files에 build에 포함해야할 파일들을 설정하는데 이때 이제 vite build한 폴더를 포함시켜준다.

output은 같은 dist폴더에 하면 기존 vite와 같은 폴더이므로 꼬이는 상황을 막기 위해 release 폴더로 electron build

 

이후 mac과 window는 결과 방식이 다르므로 win와 mac옵션을 다르게 설정

 

mac의 경우에는 icon은 icns파일을 사용해야하므로 png파일을 icns파일로 변환시켜준다.

해당 사이트에서 쉽게 변환 시킬 수 있다.

http://anyconv.com/png-to-icns-converter/

Convert PNG to ICNS Online — Free & Fast | AnyConv

 

"build": {
    "appId": "com.example.example",
    "productName": "your-project",
    "win": {
      "target": [
        "nsis"
      ],
      "icon": "electron/asset/icon.png",
      "artifactName": "your-project.exe"
    },
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "icon": "electron/asset/icon.icns",
      "artifactName": "your-project.dmg"
    },
    "directories": {
      "output": "release"
    },
    "files": [
      "dist/**/*",
      "electron/main.js",
      "electron/preload.js",
      "package.json"
    ]
  },

 

build 순서는 vite build 타입스크립트 build 이후 electron build 순서로 build를 진행하였다.

타입스크립트의 경우에는 electron에서 js만 사용할 경우 굳이 안해도 상관은 없다.

"build:win": "npm run build:vite && npm run build:ts && electron-builder --win",
"build:mac": "npm run build:vite && npm run build:ts && electron-builder --mac",

 

이제 build를 하면 mac의 경우 .dmg파일이 생성되는 이 파일을 실행시키면 mac에서 해당 데스크톱앱을 정상적으로 설치할 수 있다.

build에서 파일을 만들때 mac에서는 mac build만 가능하며, window는 window에서만 build가 가능하므로 서로 각 os에 맞춰서 build후 파일을 저장해야한다.

 

window에서 build를 하는 경우에는 .exe파일이 생성되며 해당 exe파일을 실행하면 데스크톱앱이 정상적으로 설치된다.

---

Electron Build Error

electron을 처음 build해서 설치해서 확인해보니 데스크톱앱에 아무런 화면이 나오지 않았는데

이는 router설정 문제가 제일 컸다.

 

router설정을 단순 웹에서 사용하는 것처럼 만들었는데 이게 원인이었다.

router가 이렇게 설정되어있는데 이전의 웹에서는 

history: createWebHistory() 

 

이런식으로 history를 설정했는데 이렇게 하면 electron 앱에서는 아무런 화면도 나오지 않고 빈 화면만 나오므로

history: createWebHashHistory(),

 

이부분을 webHash로 바꾼다.

이는 electron의 router방식이 웹처럼 url이 변경되서 하는 것이 아닌 hash값으로 router이동 방식이라고 하여, 오류가 생기는 것 같다

// src/router/index.ts
import type {RouteRecordRaw} from "vue-router";
import {createRouter, createWebHashHistory,} from "vue-router";

const Layouts = () => import("@/layouts/index.vue")

const constantRoutes: RouteRecordRaw[] = [
    {
        path: "/redirect",
        component: Layouts,
        meta: {
            hidden: true
        },
        children: [
            {
                path: ":path(.*)",
                component: () => import("@/views/redirect/index.vue"),
            }
        ]
    },
    {
        path: "/",
        component: Layouts,
        redirect: "/main",
        children: [
            {
                path: "main",
                component: () => import("@/views/main/index.vue")
            },
        ]
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes: constantRoutes
})

export default router;