解决vue3 + electron 中使用ipcRenderer报错的问题

版本信息

• “electron”: “^13.0.0”,
• “vue”: “^3.2.19”

报错原因

electron新版本默认禁止页面中直接操作 electron的相关api

解决办法

通过脚本注入webview中，将要操作的api添加到全局变量中

1、vue.config.js

module.exports = {
  pluginoptions: {
    electronBuilder: {
      preload: "src/preload.js"
    }
  }
};

2、preload.js （和main.js同级需要新建）

import { contextBridge, ipcRenderer } from "electron";

contextBridge.exposeInMainWorld("electron", {
  ipcRenderer: ipcRenderer
});

3、background.js中添加

preload: path.join(__dirname, “preload.js”) 添加导入即可

import path from "path";

 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,
      preload: path.join(__dirname, "preload.js")
    }
  });

4、使用

window.electron.ipcRenderer.send("test")