快速创建基于vue的electron项目：@quick-start/create-electron - npm
视图线程也就index.html是无法直接访问这个api的（如果没有开启视图层访问nodejs的功能，现在几乎没法直接开启，开启了一堆警告提示）
所以需要通过reload.js方式给index.html视图层注入对应的方法，挂在window对象下面
视图层给后端发起消息如果希望通过then的方式获取结果，推荐使用
ipcRenderer.invoke
如果是同步情况可以使用
ipcRenderer.sendSync
个人建议使用ipcRenderer.invoke
如果是仅仅视图层发起消息，不关注后续处理结果，推荐使用
ipcRenderer.send
主线程处理
他们三个发起消息后，主线程处理的方式是不一样的
ipcRenderer.invoke：
//main.js
const { ipcMain } = require('electron');
ipcMain.handle('message-from-renderer', (event, message) => {
console.log('主进程收到消息:', message, "event", event);
return "我是主进程的返回值:btn2"
});
ipcRenderer.sendSync：
//main.js
const { ipcMain } = require('electron');
ipcMain.on('render-send-sync-to-main', (event, message) => {
console.log(`receive message from render: ${message}`)
event.returnValue = '主进程回复的消息';
})
ipcRenderer.send
//main.js
const { ipcMain } = require('electron');
ipcMain.on('message-from-renderer1', (event, message) => {
console.log('主进程收到消息:', message, "event", event);
event.reply('reply-from-main', '我是主进程的返回值:btn1');
});preload封装
const { contextBridge, ipcRenderer } = require('electron');
// 使用 contextBridge 安全地暴露 ipcRenderer 功能
contextBridge.exposeInMainWorld('api', {
sendMessage: (id, message) => ipcRenderer.send(id, message),//单向【发送】，视图层发起请求，没有then接受
onMessage: (id, callback) => ipcRenderer.on(id, callback),//视图层单向接受数据
onMessageOne: (id, callback) => ipcRenderer.once(id, callback),//视图层单向接受数据
invoke: (id, message) => ipcRenderer.invoke(id, message),//【双向响应】，视图层发起请求，用then接受成功
});
视图层访问
window.onload = () => {
//使用旧的通讯方式
document.querySelector('#btn1').onclick = function () {
console.log('click', this.id)
window.api.sendMessage('message-from-renderer1', 'id:' + this.id);
window.api.onMessageOne('reply-from-main', (event, message) => {
console.log('btn1响应结果', message);
});
}
//使用新的通讯方式
document.querySelector('#btn2').onclick = function () {
console.log('click', this.id)
window.api.invoke('message-from-renderer', '你好啊,我来来之渲染层').then((result) => {
console.log("btn2:响应结果", result)
})
}
}
更多参考：
1.electron渲染线程与主线程通信，渲染线程与渲染线程通信_electron主线程和渲染线程通信-CSDN博客
2.打包的文档：electron-builder
3.包含打包的模板库，链接和上面一样
