App threw an error during load
TypeError: Cannot read property 'indexOf' of undefined
    at Function.getFileName (webpack:///./node_modules/bindings/bindings.js?:178:16)
    at bindings (webpack:///./node_modules/bindings/bindings.js?:82:48)
    at eval (webpack:///./node_modules/@serialport/bindings/lib/win32.js?:1:91)
    at Object../node_modules/@serialport/bindings/lib/win32.js (path\to\your\project\dist_electron\index.js:261:1)
    at __webpack_require__ (path\to\your\project\dist_electron\index.js:20:30)
    at eval (webpack:///./node_modules/@serialport/bindings/lib/index.js?:6:22)
    at Object../node_modules/@serialport/bindings/lib/index.js (path\to\your\project\dist_electron\index.js:173:1)
    at __webpack_require__ (path\to\your\project\dist_electron\index.js:20:30)
    at eval (webpack:///./node_modules/serialport/lib/index.js?:2:17)
    at Object../node_modules/serialport/lib/index.js (path\to\your\project\dist_electron\index.js:1517:1)

環境はwindows8.1、electronが9.0.0、serialportも9.0.0。
実行時に上記エラー。だいぶハマったので解決策を残す。

ハマりポイント

serialportはネイティブモジュールと呼ばれるもので、electronから叩くにはひと手間追加がいる。
npm i serialportしただけじゃ上手く動かないわけだ。

ネイティブモジュールの走らせ方はElectronのドキュメントがあり、
https://www.electronjs.org/docs/tutorial/using-native-node-modules

またserialportのドキュメントにもElectron向けの導入方法が書いてある。
https://serialport.io/docs/guide-installation

ざっくり手順をまとめると、

• npm i serialportで普通に導入
• npm i –save-dev electron-rebuild でリビルドツール導入
• package.jsonのscripts欄に "rebuild": "electron-rebuild -f -w serialport" 追加
• npm run rebuild 実行(直接コマンド叩いてもいいはず)

ちなみにelectron-rebuildは必ずdevelopment領域にインストールしないといけない。
まぁドキュメント読んでそのとおりにやればOKだ。

これで上手くいくと宣う記事が多いんだが、rebuildが何もせず成功！ｗと言い張る一方全く動いてくれない。

rebuild通すまで

まず、serialportのドキュメントにも書いてあるが、Windowsのリビルド処理には予め入れておくべきツール群がある。
もし下記の導入がまだならやっておかないといけない。

• 適当にPython入れる 可能なら2系がいいらしいけどいい加減やめてほしいよね…
• npm install –global –production windows-build-tools を管理者プロンプトから叩く

これでリビルド叩いたら、

npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! yourprojectname rebuild: `electron-rebuild -f -w serialport`
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the yourprojectname rebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[yourname]\AppData\Roaming\npm-cache\_logs\[date~~]-debug.log

うーんこの。
これがなっかなか解決しなくて、結局VSCodeのコマンドラインじゃなくプロジェクトフォルダで新規にコンソール起動してスクリプト叩いたら通った。
わっけわかんねぇ。

excludeに指定する

これだけでもダメなケースがある。
Serialportをメインプロセスとレンダラプロセスのどっちから呼んでるかで変わってくるんだが、
基本的にネイティブモジュールはバンドルしちゃいけない。
そこでプロジェクトのルートディレクトリにvue.config.jsを作成（TSプロジェクトでもこのファイル名で問題無い）し、
下記のような設定を書く。

// vue.config.js
module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['serialport']
        }
    }
}

これで結局動いた。死ぬほどドハマリした…。