如何在 vue.js 中导入 ipcRenderer？ __dirname 未定义

Question

我很难理解如何在 .vue 文件中正确导入 ipcRenderer。

我放入 /src/background.js 文件：

webPreferences: {
  nodeIntegration:false,
  contextIsolation: true, // protects against prototype pollution
  preload: path.join(__dirname, "../dist_electron/preload.js"),
}

并且，基于https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration，我输入了 preload.js ：

window.ipcRenderer = ipcRenderer

webpack.config.js：

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

为了方便调试，我创建了一个github repo。 你可以从这里 git clone 仓库：https://github.com/raphael10-collab/ElectronVueTypeScriptScaffolding.git

执行yarn后->yarn electron:serve 你会得到正确的页面。

但是当在 /src/views/Home.vue 中激活这一行时：

//从“电子”导入 { ipcRenderer }

你会得到这个错误：

__dirname is not defined

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 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: 85.0.4183.83
    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 
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-babel: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-e2e-cypress: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-router: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-typescript: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-unit-mocha: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-vuex: ~4.4.0 => 4.4.6 
    @vue/cli-service: ~4.4.0 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: ^1.0.3 => 1.0.3 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    typescript: ^3.9.7 => 3.9.7 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.5 => 7.2.5 
    vue-cli-plugin-electron-builder: ~2.0.0-rc.4 => 2.0.0-rc.4 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.20.0 => 8.20.0 
    vue-loader:  15.9.3 
    vue-property-decorator: ^9.0.0 => 9.0.0 
    vue-router: ^3.2.0 => 3.3.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.5.1 => 3.5.1 
    vuex-class: ^0.3.2 => 0.3.2 
  npmGlobalPackages:
    @vue/cli: 4.4.6

node version: v14.5.0

更新 1)

我尝试将 webPreferences 设置如下（使用 nodeIntegration: true）：

webPreferences: {
  nodeIntegration: true,
  //contextIsolation: true, // protects against prototype pollution
  //preload: path.join(__dirname, "../dist_electron/preload.js"),
},

得到了这个错误：

fs.existsSync is not a function

四处搜索有关此类问题的信息，我发现了这篇文章： How to resolve fs.existsSync is not a function 通过此链接：https://webpack.js.org/concepts/targets/

但我已经在 webpack.config.js 中指定了目标“节点”：

在 webpack.config.js 中：

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

那么...如何解决这个新问题？

顺便说一句， 为什么一定要放

webPreferences: {
    nodeIntegration: true,
} 

如果出于安全原因，更安全的是：

webPreferences: {
  nodeIntegration:false,
  contextIsolation: true, // protects against prototype pollution
  preload: path.join(__dirname, "../dist_electron/preload.js"),
}

dist_electron/preload.js ：

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

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
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));
            }
        }
    }
);

window.ipcRenderer = ipcRenderer

https://www.electronjs.org/docs/tutorial/security#electron-security-warnings

更新 2)

在 vue.config.js 我放了：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: 'dist_electron/preload.js',
      // Or, for multiple preload files:
      //preload: { preload: 'src/preload.js', otherPreload: 
      //'src/preload2.js' }
    }
  }
}

但是当我这样做时，我得到了同样的错误

yarn electron:serve

UncaughtReferenceError: __dirname is not defined

在设置 nodeIntegration: true 时（但我更愿意将其设置为 false，并使用 preload.js 文件），我得到另一个错误（如上）：

Uncaught TypeError: fs.existsSync is not a function

Uncaught TypeError: fs.existsSync is not a function

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

Answer 1

更新答案 - 禁用 Nodeintegration 并启用 contextIsolation

为了将 ipcRenderer 与 Vue CLI 插件 Electron Builder 一起使用，您需要首先设置 electron 以使用 preload.js 文件。

在您的vue.config.js 文件中，您需要像这样添加preload.js 路径：

// vue.config.js - project root

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js',
      // Or, for multiple preload files:
      preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
    }
  }
}

接下来，您需要更新您的background.js 文件以在网络首选项中使用preload.js，如下所示：

// src/background.js

const win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // Use pluginOptions.nodeIntegration, leave this alone
    // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
    contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    enableRemoteModule: true,
    preload: path.join(__dirname, 'preload.js'),
  },
})

注意：nodeIntegration 默认禁用，contextIsolation 默认启用

完成后，您可以在 src 目录中创建 preload.js 文件。
启用contextIsolation 后，您需要导入contextBridge 和ipcRenderer。然后您可以将ipcRenderer 公开给您的客户。

然后将其添加到文件中：

// src/preload.js

import { contextBridge, ipcRenderer } from 'electron'

// Expose ipcRenderer to the client
contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    let validChannels = ['nameOfClientChannel'] // <-- Array of all ipcRenderer Channels used in the client
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  receive: (channel, func) => {
    let validChannels = ['nameOfElectronChannel'] // <-- Array of all ipcMain Channels used in the electron
    if (validChannels.includes(channel)) {
      // Deliberately strip event as it includes `sender`
      ipcRenderer.on(channel, (event, ...args) => func(...args))
    }
  }
})

注意：您需要确保您的preload.js 文件位于src 文件夹中，而不是dist_electron 中

要测试并确保预加载文件正常工作，您还可以在 preload.js 文件中创建警报

// src/preload.js

import { contextBridge, ipcRenderer } from 'electron'

// Expose ipcRenderer to the client
contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    let validChannels = ['nameOfClientChannel'] // <-- Array of all ipcRenderer Channels used in the client
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  receive: (channel, func) => {
    let validChannels = ['nameOfElectronChannel'] // <-- Array of all ipcMain Channels used in the electron
    if (validChannels.includes(channel)) {
      // Deliberately strip event as it includes `sender`
      ipcRenderer.on(channel, (event, ...args) => func(...args))
    }
  }
})

alert("It Worked!") // Remove this line once you confirm it worked

当您验证您的预加载脚本工作正常后，您可以从您的 vue 应用访问ipcRenderer。

像这样：

// src/App.vue

<template>
     \\ Some html
</template>

<script>
  export default {
    name: "App",
    methods: {
      test(){
        window.ipcRenderer.send(channel, args...) // or any other ipcRenderer method you want to invoke
    }
};
</script>

在电子中你可以监听这些事件

// background.js
ipcMain.on(channel, (event, args) => {
  // Do stuff
});

来源：
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration With contextIsolation = true, is it possible to use ipcRenderer?

原答案

为了将 ipcRenderer 与 Vue CLI 插件 Electron Builder 一起使用，您需要首先设置 electron 以使用 preload.js 文件。

在您的vue.config.js 文件中，您需要像这样添加preload.js 路径：

// vue.config.js - project root

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js',
      // Or, for multiple preload files:
      preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
    }
  }
}

接下来，您需要更新您的background.js 文件以在网络首选项中使用preload.js，如下所示：

// src/background.js

const win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // Use pluginOptions.nodeIntegration, leave this alone
    // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html#node-integration for more info
    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+   preload: path.join(__dirname, 'preload.js')
  }
})

完成后，您可以在 src 目录中创建 preload.js 文件

然后将其添加到文件中：

// src/preload.js

import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer

注意：您需要确保您的preload.js 文件位于src 文件夹中，而不是dist_electron 中

要测试并确保预加载文件正常工作，您还可以在 preload.js 文件中创建警报

// src/preload.js

import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer

alert("It Worked!") // Remove this line once you confirm it worked

当您确认您的预加载脚本工作正常后，您可以从您的 vue 应用访问 ipcRenderer。

像这样：

// src/App.vue

<template>
     \\ Some html
</template>

<script>
  export default {
    name: "App",
    methods: {
      test(){
        window.ipcRenderer.send(channel, args...) // or any other ipcRenderer method you want to invoke
    }
};
</script>

来源：
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration

Answer 2

对我有用的是将电子窗口的contextIsolation 设置为false。

所以在您的main.js 中，无论您创建BrowserWindow，它都会如下所示：

const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: false,
    preload: path.join(__dirname, 'preload.js'),
  },
})

然后在preload.js 你可以简单地做

const { ipcRenderer } = require('electron')
window.ipcRenderer = ipcRenderer

然后你就可以在你的 vue 代码的任何地方访问ipcRenderer。

似乎在当前版本的电子contextIsolation 中默认为true，这使得preload.js 看到的window 与您的vue 应用看到的不同。

Answer 3

您需要将nodeIntegration 设置为true。

这会在渲染器进程（即前端）中启用 NodeJ，因此您可以在 Vue 代码中使用 fs（文件系统）和其他仅限 NodeJ 的功能。

由于 ipcRenderer 也需要 NodeJs 的环境（__dirname 只是 NodeJs 的全局变量），所以需要激活它。