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などが必要になってきます
  • この手順も後で書くかもしれません

さいごに

• ここまでで雛形的には出来たので後はVueとElectronで開発を行っていけばOKです
• https://github.com/ishihama/vue-electron-boilerplate に今回作成したものが置いてあります