电子渲染器中的 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 启动它时，我在 window:

的控制台中看到这个错误

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配置
缺少节点集成以像 require

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

您将在 webpack documentation 中找到示例。

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

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

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

例如，请查看。

电子渲染器中的 IPC 因缺少函数而抛出错误 __dirname

IPC in electron renderer throws error from missing function __dirname

javascript

ipc

node.js

vue.js

electron