vue + electron で windowsデスクトップアプリを作成する

確認した環境

• windows 10 pro 64bit
• node v10.16.0

環境のセットアップ

Vue CLI + electron-builderプラグイン で環境をセットアップします。
electron-vueボイラープレートは更新が止まっているみたいなので使いません。

Vue CLI

以下のコマンドで、Vue CLI をインストールします。

npm i -g @vue/cli

vueプロジェクトを作成します。プロジェクト名はmy-projectにしました。

vue create my-project

以下のコマンドで、Welcomeページが表示されるのを確認します。webブラウザにhttp://localhost:8080/を指定することで確認できます。

cd my-project
npm run surve

electron-builderプラグイン

続けて、プロジェクトフォルダの直下で以下のコマンドを実行し、electron-builderプラグインをインストールして呼び出します。これにより、electronやその依存パッケージ、スクリプトが追加されます。

vue add electron-builder

途中でインストールするelectronのバージョンの選択を求められますが、6.0.0を選択しました。

最後に以下のエラーが表示されますが、使用に影響はないようです。

---(省略)---

16 packages are looking for funding.
Run "npm fund" to find out more.
-  Running completion hooks...
error: 'installVueDevtools' is defined but never used (no-unused-vars) at src\background.js:6:3:
  4 | import {
  5 |   createProtocol,
> 6 |   installVueDevtools
    |   ^
  7 | } from 'vue-cli-plugin-electron-builder/lib'
  8 | const isDevelopment = process.env.NODE_ENV !== 'production'
  9 |


1 error found.

実行とアプリケーションのビルド

webアプリとして実行

npm run serve

デスクトップアプリとして実行

npm run electron:serve

ビルドしてデスクトップアプリを作成

プロジェクトフォルダ直下のdist_electronフォルダ内に実行ファイルが作成されます。

npm run electron:build

ビルドオプション

プロジェクトのルートにvue.config.jsファイルを新規作成し、そのファイル内容を記述します。

記述例：

vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: "my-application",
        appId: "com.sample.myapplication",
        win: {
          icon: 'src/assets/app.ico',
          target: [
            {
              target: 'zip', // 'zip', 'nsis', 'portable'
              arch: ['x64'] // 'x64', 'ia32'
            }
          ]
        }
      }
    }
  }
}

builderOptions:

• productName : アプリケーションタイトル
• appID : アプリケーションユーザーモデル ID (AUMID)として使用される。
• win : windowsアプリの設定

  • icon : アプリケーションアイコンのパス

  • target :配布形態

    • 'zip' : zip圧縮
    • 'nsis' : Nullsoft Scriptable Install System
    • 'portable' : インストーラーのないポータブルアプリケーション
    • 'msi' : Microsoft Installer
    • 'appx' : UWPアプリパッケージ

  • arch: プラットフォーム

    • 'x64' : 64bitアプリケーション
    • 'ia32' : 32bitアプリケーション

参考：Any Windows Target