Help us understand the problem. What is going on with this article?

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 :
      • target : 配布形態
      • 'zip' : zip圧縮
      • 'nsis' : Nullsoft Scriptable Install System
      • 'portable' : インストーラーのないポータブルアプリケーション
      • 'msi' : Microsoft Installer
      • 'appx' : UWPアプリパッケージ
      • arch: プラットフォーム
      • 'x64' : 64bitアプリケーション
      • 'ia32' : 32bitアプリケーション

参考:Any Windows Target

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした