在 Electron 和 Vue 中加载预加载脚本答案

【问题标题】：Loading preload script in Electron and Vue在 Electron 和 Vue 中加载预加载脚本
【发布时间】：2019-10-21 23:56:48
【问题描述】：

我正在使用 Vue CLI 3 和 vue-cli-plugin-electron-builder 打包我的 Vue Electron 应用程序，但我无法让我的 preload.js 脚本用于电子工作。

主窗口

win = new BrowserWindow({
  width: 800,
  height: 600
  webPreferences: {
    nodeIntegration: false,
    preload: path.join(__dirname, "/../src/preload.js") // works but window.electron.dialog in undefined
  }
});

preload.js

const { dialog } = require("electron");

window.electron = {};
window.electron.dialog = dialog;

window.electron.dialog 在我的 Vue 组件中始终未定义 - 导入显然不起作用。请注意，window.electron 已正确定义。我一定是错过了什么。

【问题讨论】：

标签： vue.js electron vue-cli-3 electron-builder

【解决方案1】：

将以下行添加到文件 vue.config.js 中，如果该文件不存在，则在项目的根文件夹中创建一个

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

查看文档了解更多#preload-files

【讨论】：

【解决方案2】：

解决方案比预期的要简单。导入在 window.onload 事件中起作用。

window.onload = () => {
  const { dialog } = require("electron").remote;

  window.electron = {};
  window.electron.dialog = dialog; // now set properly
};

【讨论】：

我仍然无法让它工作...... require("electron") 在此处返回 undefined。