Vue CLIで作成したElectronソフトがうまくビルドできない問題を修正した

前置き

今回はVue CLIで作成したElectronソフトがERR_ELECTRON_BUILDER_CANNOT_EXECUTEとでて、うまくビルドできない問題を修正した話について書いていきます。ちなみにこの内容をGoogleで検索をしたところ、何らかのプロセスが使用しているということしか出てこなく自分で試していたところ、解決をすることができました。

前提条件

今回は以下のような環境で行っています。

• OS Windows 10 Home 21H2 19044.1645
• Node.js v16.13.2
• Packages (package.json 一部内容を書き換えています)

package.json

{
  "name": "Example App",
  "version": "0.1.0",
  "description": "This is Example",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "clean": "rimraf dist_electron"
  },
  "main": "background.js",
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.22.3",
    "vue": "^3.2.33",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.0.0-rc.21",
    "@vue/vue3-jest": "^27.0.0",
    "babel-jest": "^28.0.3",
    "electron": "^18.2.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^8.14.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "jest": "^28.0.3",
    "prettier": "^2.4.1",
    "rimraf": "^3.0.2",
    "sass": "^1.51.0",
    "sass-loader": "^12.0.0",
    "spectron": "19.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1"
  }
}

• Vue Config (こちらも問題と関係ない部分を一部内容を書き換えています)

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: "Example App",
        appId: "com.example.exapleapp",
        copyright: "Copyright © 2022 My",
        win: {
          target: "nsis",
          icon: "icon.ico",
        },
        mac: {
          target: "dmg",
        },
        linux: {
          target: "deb",
        },
        nsis: {
          oneClick: false,
          allowToChangeInstallationDirectory: true,
        },
        directories: {
          buildResources: "build",
        },
      },
    },
  },
});

何が問題だったのか

今回の場合はVue CLIでプロジェクトを立ち上げたときにdefineConfigというアノテーションの自動補完をしてくれる機能有効かされているのが問題でした。

どこを修正するのか

上記のように、defineConfigを使わないようにすることで解決しました。

- const { defineConfig } = require("@vue/cli-service");
- module.exports = defineConfig({
+ module.exports = {
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: "Example App",
        appId: "com.example.exapleapp",
        copyright: "Copyright © 2022 My",
        win: {
          target: "nsis",
          icon: "icon.ico",
        },
        mac: {
          target: "dmg",
        },
        linux: {
          target: "deb",
        },
        nsis: {
          oneClick: false,
          allowToChangeInstallationDirectory: true,
        },
        directories: {
          buildResources: "build",
        },
      },
    },
  },
- });
+ }:

おまけ

なるべくいらない機能はつけていないほうがいいです。Vue CLIで後からElectronを追加した場合だとtranspileDependenciesというIEに対応するための機能がありますが、Electronアプリケーションのみの場合はChromiumがベースとなっているので、いらないので消すことをお勧めします。しかしDiscordのようにWebでも動くアプリケーションにする場合は残しておいてもいいかもしれません。

module.exports = {
- transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: "FFu",
        appId: "github.my-mc.ffu",
        copyright: "Copyright © 2022 My",
        win: {
          target: "nsis",
          icon: "icon.ico",
        },
        mac: {
          target: "dmg",
        },
        linux: {
          target: "deb",
        },
        nsis: {
          oneClick: false,
          allowToChangeInstallationDirectory: true,
        },
        directories: {
          buildResources: "build",
        },
      },
    },
  },
};