出于安全原因，渲染器线程（来自/src的UI代码）无权访问Node.js文件。但是，您可以运行Node.js代码，并通过位于/src-electron/electron-preload.[js|ts]的Electron预加载脚本将其连接到渲染器线程。使用contextBridge（来自electron包）公开UI所需的内容。

因为预加载脚本是从Node.js运行的，所以请注意使用它做了什么以及向渲染器线程暴露了什么内容！

如何使用它

在/src-electron/文件夹中，有一个名为electron-preload.js的文件。用你的预加载代码填充它。

确保你的/src-electron/electron-main.[js|ts]有以下内容（靠近 "webPreferences"部分）。

// 文件: /src-electron/electron-main.[js|ts]

// 在顶部添加这个：
import path from 'path'

// ...

function createWindow () {
  // ...
  mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
      // 这就是神奇之处：
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
    }
  })

/src-electron/main-process/electron-preload.[js|ts]内容的例子：

// 将 window.myAPI.doAThing() 
// 注入渲染器线程的例子 (/src/*)

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {}
})

安全考虑

使用 "contextBridge"并不自动意味着你所做的一切是安全的。例如，下面的代码是不安全的。

// 糟糕的代码；不要！!
contextBridge.exposeInMainWorld('myAPI', {
  send: ipcRenderer.send
})

它直接暴露了一个强大的API，没有任何形式的参数过滤。这将允许任何网站发送任意的IPC消息，这是你不希望看到的。暴露基于IPC的API的正确方式是为每个IPC消息提供一个方法。

// 良好的代码
contextBridge.exposeInMainWorld('myAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})

现在，loadPreferences在你的javascript代码中全局可用（即：window.myAPI.loadPreferences）。

在主线程中使用上述代码和invoke'到load-prefs’，会有这样的代码：

ipcMain.handle('myAPI:load-prefs', () => {
  return {
    // 包含首选项的对象
  }
})

预加载脚本的自定义路径

如果你想改变预装脚本的位置（甚至是主线程文件），那么请编辑/quasar.config.js。

// 如果你想改变默认文件
sourceFiles: {
  electronMain: 'src-electron/electron-main.js',
  electronPreload: 'src-electron/electron-preload.js'
}