javascript - Electron 渲染器中的IPC从缺少的函数__dirname引发错误

Question

我想使用以下代码将消息从渲染器发送到主进程，然后该主进程使用 Electron 日志将其写入日志文件。我的main.js看起来像这样:

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const { ipcMain } = require('electron');
const log = require('electron-log');
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    frame: true,
    width: 400,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false
    }
  })

  ipcMain.on('infoLog', (event, args) => {
    log.info(args)
   });
....

现在，我尝试相应地在App.vue中解决IPC:

import Navbar from '@/components/Navbar'
const { ipcRenderer } = require('electron')

export default {
  name: 'App',
  components: {
    Navbar
  },
  created: function () {
    ipcRenderer.send('infoLog','A async message to main')
  }
}

当我使用 yarn electron:serve启动它时，我在窗口的控制台中看到此错误:

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:2778)
    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-v16/dist/index.js?!./src/App.vue?vue&type=script&lang=js:5)
    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-v16/dist/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)
    at Module../src/App.vue?vue&type=script&lang=js (app.js:1099)

我不明白的是，我完全按照Electron的文档进行设置:
https://www.electronjs.org/docs/api/ipc-main

Answer 1

您在这里有2个不同的问题:

正确的webpack配置以支持node.js代码

缺少 Node 集成，无法使用像require一样的 Node API

您在此处看到的stacktrace可能来自错误的Webpack配置。除非另有说明，否则webpack会尝试将 __dirname替换为其他内容。在这里，我们不需要- Node 提供 __dirname并希望使用它，因此我们必须告诉webpack别让 __dirname留下。
您可以在 webpack documentation中找到一个示例。
对于webpack 5，添加 Node 部分应该有帮助:

module.exports = {
  //...
  node: {
    global: false,
    __filename: false,
    __dirname: false,
  }
};

解决此问题后，您可能会遇到浏览器窗口不知道 require的问题。您可以使用预加载脚本重新引入特定的 Node API(例如IPC)。在不知道自己正在做什么的情况下，不要激活完整的 Node 集成。
例如，看看 this answer。