vue.js - __dirname 未定义：ipcRenderer.on('settings', () => {

Question

我首先使用 @vue/cli 创建了一个全新的 vue.js 项目：

vue 创建新项目

在创建过程中，我选择了 typecipt 选项。

然后，我安装了 electron-builder 插件：

vue 添加电子生成器

执行纱线电子：服务全新的应用程序似乎工作：

但是当我添加这两行时：

ipcRenderer.on('设置', () => { }

在 Ipc.vue 中：

我收到错误消息：

babel.config.js ：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    //"module": "es2015",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "paths": {
     "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

环境信息：

System:
  OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
  CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
Binaries:
  Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
  Yarn: 1.22.4 - /usr/bin/yarn
  npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
Browsers:
  Chrome: 84.0.4147.105
  Firefox: 79.0
npmPackages:
  @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
  @vue/babel-plugin-transform-vue-jsx:  1.1.2 
  @vue/babel-preset-app:  4.4.6 
  @vue/babel-preset-jsx:  1.1.2 
  @vue/babel-sugar-functional-vue:  1.1.2 
  @vue/babel-sugar-inject-h:  1.1.2 
  @vue/babel-sugar-v-model:  1.1.2 
  @vue/babel-sugar-v-on:  1.1.2 

如何解决问题？期待您的帮助。马可

更新 1)

将 nodeIntegration: true 放在 createWindow() 函数中，我收到了这个新的错误消息：

顺便说一句，出于安全原因，我更喜欢保留 nodeIntegration: false 我尝试使用此处建议的预加载文件：Electron require() is not defined 但具有：

  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(app.getAppPath(), "preload.js"),

我收到此错误消息：

更新 2)

这是 preload.js ：

const {
    contextBridge,
    ipcRenderer
} = require("electron");

const path = require("path");

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) =>    
func(...args));
            }
        }
    }
);

在 background.js 我放：

webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(__dirname, "preload.js"),
}

我收到此错误：

更新 3)

只有 nodeIntegration: true，没有预加载：

webPreferences: {
    nodeIntegration: true,
}

我收到此错误：

还预加载：

webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, "preload.js"),
}

我收到另一个错误：

更新 4) preload.js 和 background.js 在同一个文件夹中：src

webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, "./preload.js"),
}

我收到此错误：

这是 webpack.config.js ：

import 'script-loader!./script.js';
import webpack from 'webpack';

const path = require('path');

module.exports = {
  target: ['electron-renderer', 'electron-main', 'electron-
preload'],
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.resolve.alias.set('jsbi', path.join(__dirname, 
    'node_modules/jsbi/dist/jsbi-cjs.js'));
      }
    },
  },
};

module.exports = {
  entry: './src/background.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  }
}

webpack.config.js 是正确的还是我应该在这里修改一些东西？