版本信息
- “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")