Vue + Electronなアプリを簡単に作る #Node.js

はじめに

手順を忘れてしまうので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 に今回作成したものが置いてあります