电子渲染器中的 IPC 因缺少函数 __dirname 引发错误

Question

我想使用以下代码将消息从渲染器发送到主进程，然后使用 electron-log 将其写入日志文件。我的 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 个不同的问题：

• 支持 node.js 代码的正确 webpack 配置
• 缺少节点集成以使用节点 API，如 require

您在此处看到的堆栈跟踪可能来自不正确的 webpack 配置。除非另有说明，否则 webpack 会尝试用不同的东西替换 __dirname。这里我们不想要那个 - node 提供了__dirname，我们想使用它，所以我们必须告诉 webpack 不要管__dirname。

您可以在webpack documentation 中找到一个示例。

对于 webpack 5，添加节点部分应该会有所帮助：

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

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

例如，看看this answer。