vue-cli + electron-builder環境構築とIPC #TypeScript

環境
Mac Ventura13.1
node v16.14.2
@vue/cli 5.0.8

環境構築

vue create アプリ名
routerはオフにしましょう、入れてると後でこんなエラーが出ます

It is detected that you are using Vue Router. It must function in hash mode to work in Electron. Learn more at https://goo.gl/GM1xZG

ここではTypeScriptのVue3に。

cd アプリ名
yarn serve
ブラウザで起動することを確認。

vue add electron-builder
これを入れるとelectronアプリとして起動できるようになる
今回は13系を選択。

エラー対応

yarn electron:serve
ここでエラー。

ts-loaderがないらしい。
yarn add ts-loader@8.2.0

これで起動はするがvueエラー。
62行目のtryCatchのerrorに型が当たっていないのでとりあえずanyにしておく。
~~background.ts内の"VUEJS3_DEVTOOLS"が存在しない。VisualStudioCodeさんによると"VUEJS_DEVTOOLS"ならあるので書き換える。~~　環境作り直したらこれは起きなくなった。

これでelectron:serveは通るようになった。

yarn electron:build
こちらは通らない。エラーを見ると/usr/bin/pythonがないよと。brewで入れたpython3なら入ってるがpython2じゃないとダメらしい

brew install pyenv
echo 'eval "$(pyenv init --path)"' >> ~/.zshrc
source ~/.zshrc
pyenv install --list
pyenv install 2.7.17
pyenv global 2.7.17

これでpython2が入るので環境変数から指定してあげる

which python
PYTHON_PATH=/Users/{{username}}/.pyenv/shims/python yarn run electron:build
これで通ったのでdist_electronを見るとdmgが入ってるので開くとお馴染みの画面が出る

また./dist_electron/macに.appがそのまま入ってる

windows用に.exeを吐くには
yarn run electron:build --win --x64
とする
こっちはpython必要ないっぽい

プロセス間通信

vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

nodeIntegrationはfalseの方が望ましいがvue側でelectronをimportするとこんなエラーが出てしまう

Module not found: Error: Can't resolve 'fs' in '/Users/username/dirname/node_modules/electron'

メイン→レンダラ

background.ts

//async function createWindow() {
//  const win = new BrowserWindow({
// 中略
win.webContents.send("channel", "メッセージ");

HelloWorld.vue

import { ipcRenderer } from "electron";
ipcRenderer.on("channel", (event: any, message: string) => {
  alert(JSON.stringify(event));
  alert(message);
});

レンダラ→メイン

HelloWorld.vue

import { ipcRenderer } from "electron";
ipcRenderer.send("channelName", "にゃーん");

background.ts

app.on("ready", async () => {
  ipcMain.on('channelName', (event: any, message: string) => {
    console.log(event);
    console.log(message)
  })
})

ここまでできればvueのイベントをメインプロセスに送っていろいろできる