Electron+Vueで「Uncaught ReferenceError: __dirname is not defined」エラー

ダイアログを表示しようとすると、以下のエラーが発生しました。

Uncaught ReferenceError: __dirname is not defined
    at eval (webpack-internal:///./node_modules/electron/index.js:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:4725)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:4)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/App.vue?vue&type=script&lang=js&:2)

対処法

プロジェクトのルートに「¹vue.config.js」を作成すると解決しました。

vue.config.js

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

レンダラープロセス側の実装

App.vue

<template>
  ...
  <v-button @click="showDialog" />
  ...
</template>

<script>
import { ipcRenderer } from "electron";

export default {
  name: "App",
  ...
  methods: {
    showDialog: function() {
      ipcRenderer.invoke("showDialog", null);
    },
  },
}
</script>

メインプロセス側の実装

background.js

// ipcMain, dialogを追加
import { app, protocol, BrowserWindow, ipcMain, dialog } from "electron";

ipcMain.handle("showDialog", async (event, data) => {
  dialog.showMessageBox({
    title: "タイトル",
    message: "詳細",
  });
});
...

参考

How fix __dirname not defined when using electron events with Vue?

1. アプリ全体に関わる設定を書くためのファイル ↩