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

Vue + Electronなアプリを簡単に作る

はじめに

  • 手順を忘れてしまうのでVue + Electronアプリの作り方を書いていきます
  • 何もないところからexeとdmgを作るところまで書きます
  • vue-cliとVue CLI Plugin Electron Builderを使います

vue cliをインストール(インストール済みならスキップ)

$ yarn global add @vue/cli
$ export PATH="$PATH:`yarn global bin`" # 実際は.bashrcや.zshrcなどに書くべきですね

Vueアプリの雛形作成

$ vue create vue-electron-boilerplate
  • presetはdefaultでも良いと思いますがお好みでManually選択してください
  • 私はTypeScript Router Linter / Formatterで始めることが多いです
Vue CLI v3.11.0
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◯ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

electron-builderを追加してアプリ起動確認

$ cd vue-electron-boilerplate
$ vue add electron-builder
$ yarn electron:serve
  • VueなElectronアプリが起動すればOK

electron-builderの設定

  • vue.config.jsをルートディレクトリ直下に作成しビルド設定を書いていきます
  • 最初これが分からずpackage.jsonに書いても適用されず長いことハマってしまいました

    • electron-builderのドキュメントではpackge.jsonに設定を書けって言われているのですがVue CLI Plugin Electron Builderのドキュメントではvue.config.jsに設定を書けと言われています
  • winとmacの実行可能ファイルを作成する設定が書いてあります

  • extraResourcesは必須ではありませんが設定ファイルなどを外だしするのに便利だったので書いてあります

  • port変えたいことは多いと思うのでdevServerの設定もついでに書いてあります

vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.example.app",
        win: {
          target: "portable",
          icon: "src/assets/icon.png"
        },
        mac: {
          target: "dmg",
          icon: "src/assets/icon.png"
        },
        extraResources: [
          {
            from: "./resources/config",
            to: "config/",
            filter: ["**/*"]
          }
        ]
      }
    }
  },
  devServer: {
    port: 3000,
    disableHostCheck: true
  }
};

  • package.jsonのrun scriptsにビルドコマンドを追記します
package.json
  "scripts": {
+     "electron:build:win": "vue-cli-service electron:build --win",
+     "electron:build:mac": "vue-cli-service electron:build --mac",
  }

Electronアプリのビルド

yarn electron:build:win                                                                                                                            
yarn electron:build:mac                                                                                                                            
  • 無事に成功すればdist_electronディレクトリにexeやdmgが作成されます
  • macアプリはmacじゃないとビルドできないと思います
  • macからwinアプリをビルドするにはwineなどが必要になってきます
    • この手順も後で書くかもしれません

さいごに

Why do not you register as a user and use Qiita more conveniently?
  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
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