主机和渲染器之间的Vue/Electron IPC

Question

我正在尝试设置我的Vue浏览器应用程序和电子主进程之间的通信，但它不工作。

甚至在调用startBot()之前，我得到一个错误消息，__Dirname是未知的。但是这个常量在代码中找不到

我做错了什么?

https://gist.github.com/Quenos/7d6dbe4f5410739499ea9e3b0b4f961a.js

这是后台。js，我打开浏览器窗口与预加载。这样做的目的是使窗口对浏览器进程

可用。

function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1300,
height: 1100,
title: "Hedgehog TRDR Bot",
icon: path.join(__static, "hedgehog.jpg"),
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
// __static is set by webpack and will point to the public directory
preload: path.resolve(__static, "preload.js"),
},
});

这就是preload.js

const { contextBridge, ipcRenderer } = require("electron");
const validChannels = ["READ_FILE", "WRITE_FILE"];
contextBridge.exposeInMainWorld("ipc", {
send: (channel, data) => {
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
on: (channel, func) => {
if (validChannels.includes(channel)) {
// Strip event as it includes `sender` and is a security risk
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
},
});

包含侦听器的主进程，然后将执行文件处理

const { ipcMain } = require("electron");
const fs = require("fs");
var file;
ipcMain.on("OPEN_FILE", (event, payload) => {
console.log("daaro");
file = fs.createWriteStream(payload.path);
event.reply("OPEN_FILE", { content: "roger" });
});
ipcMain.on("TEST_FILE", (event, payload) => {
console.log("daaro");
file.write(payload.path);
event.reply("OPEN_FILE", { content: "roger" });
});

和浏览器进程发送请求做文件处理:

async startBot() {
window.ipc.send("OPEN_FILE", { path: "./HH_trdr_bot.csv" });
}

Answer 1

与此同时，我发现这篇文章完美地回答了我的问题

https://medium.com/swlh/how - -安全设置- - - - - - - -电子-应用- - vue和webpack - 556 fb491b83

Answer 2

Vue CLI Plugin Electron Builder的文档包含如何做到这一点的描述，但它有点分散。

首先，看看如何配置预加载脚本，即:

vue.config.js

module.exports = {
// ...
pluginOptions: {
electronBuilder: {
preload: 'src/preload.js',
}
}
}

，然后，重复BrowserWindow的webPreferences.preload构造器选项中的路径。

preload: path.join(__dirname, 'preload.js')

最后，在src/preload.js中暴露IPC渲染器，如IPC无节点集成中所述。

src/preload.js

import { contextBridge, ipcRenderer } from 'electron'
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld('ipcRenderer', {
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))
}
}
})

当订阅的组件即将被销毁时，取消订阅事件侦听器可能也是一个好主意。

Answer 3

我通过将preload.js文件放入公共文件夹中，在https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files docs中，Folder Structure部分下有一个小图表，上面写着├── public/ # Files placed here will be available through __static or process.env.BASE_URL，所以我所做的只是简单地使用文档中描述的__static变量，并将其附加为preload.js

const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,
preload: __static + '/preload.js', // <-- simple solution
}
})