__dirname не определено с помощью: ipcRenderer.on ('settings', () => {

Question

Сначала я создал новый проект vue. js с помощью @ vue / cli:

vue create newproject

в процессе создания, я выбрал опцию typescipt.

Затем я установил плагин для построения электронов:

vue добавить конструктор электронов

выполнение пряжи электрон: служите, новое приложение кажется работающим:

But when I add these two lines :

ipcRenderer.on('settings', () => { }

in Ipc.vue:

I get there error messages :

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"
  ]
}

Environment Info:

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 

How to solve the problem? Looking forward to your kind help. Marco

Update 1)

Putting nodeIntegration: true in the createWindow() function I'm getting this new error message:

By the way, I would prefer, for security reasons, keep nodeIntegration: false I tried to use a preload file as suggested here: Electron require () не определен , но с:

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

Я получаю это сообщение об ошибке:

Update 2)

This is 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));
            }
        }
    }
);

and in background.js I put :

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

I get this error:

Update 3)

With just nodeIntegration: true, without preload:

webPreferences: {
    nodeIntegration: true,
}

I get this error:

With also preload:

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

I get this other error:

Update 4) preload.js and background.js are in the same folder: src

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

I get this error:

введите описание изображения здесь

Это 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 правильный или мне здесь что-то изменить?