一、 vue页面下发消息给主进程(ipcRenderer发 ipcMain接收)

  • background.js
import { ipcMain } from 'electron'
const path = require('path');

#定义preload.js
const win = new BrowserWindow({ 
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
})


//定义事件
ipcMain.on('vue-event', function(event, arg) {
    // mainWindow.destroy() // 名为 mainWindow 的进程关闭
    console.log(arg);  // prints "ping"   
})

preload.js(新加)

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

vue.config.js

#添加
module.exports = defineConfig({
  ...
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      preload: 'src/preload.js',
    }
  }
}

vue3页面里调用

#调用方法一
window.ipcRenderer.send('vue-event', { evt:"dosome", message: 'hello'})    
#调用方法二
import { ipcRenderer } from 'electron'

ipcRenderer.send('vue-event', { evt:"mini"})

二、 ipcMain中发消息给ipcRenderer


发送路由router

#background.js
win.webContents.send('goto', '/home');

#main.js
import router from './router'
import {  ipcRenderer } from 'electron'
//跳转到指定页面
ipcRenderer.on('goto', (evt,arg) => {
    router.push(arg)
});

右键菜单

#background.js
// 监听右键事件&显示右键菜单
ipcMain.on('contextMenu', () => {
   contextMenu.popup(BrowserWindow.getFocusedWindow());
});


#vue页面
<div class="about" @contextmenu="openMenu($event)">

openMenu(evt){
      evt.preventDefault();
      ipcRenderer.send('contextMenu')
}

发送消息给窗口

#vue页面
<button @click="sendA">Max</button>

<script lang="ts">
import  from 'electron'

sendA(){ 
    console.log('事件')
    ipcRenderer.send('vue-event',{"evt":"max"})
},