vue-cli-plugin-electron-builder preload.js 的设置

12 min read

vue-cli-plugin-electron-builder preload.js 的设置

主进程

mainWindow = new BrowserWindow({
    width: 1200,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

上下文隔离是一项功能,可确保您的preload脚本和Electron的内部逻辑都在与您在中加载的网站不同的上下文中运行webContents。这对确保安全性很重要,因为它有助于防止网站访问电子内部或您的预加载脚本可以访问的强大API。

这意味着window您的预加载脚本可以访问的对象实际上是与网站可以访问的对象不同的对象。例如,如果您window.hello = 'wave’在预加载脚本中进行了设置,并且window.hello网站尝试访问它,则启用上下文隔离将是未定义的。

每个单独的应用程序都应该启用上下文隔离,并且从Electron 12开始默认情况下将启用它。

Vue项目配置文件

module.exports = {
    //...
    pluginOptions: {
        electronBuilder: {
            preload: 'src/preload.js',
            // Or, for multiple preload files:
            // preload: { preload: 'src/preload.js', otherPreload: 'src/preload2.js' }
        },
    },
    //...
};

预加载内容

src/preload.js

import { ipcRenderer } from "electron";

window.ipcRenderer = ipcRenderer;