Quasar CLI with Vite - @quasar/app-vite
Electron预加载脚本

出于安全原因,渲染器线程(来自/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: () => {}
})

WARNING

  1. 请注意该文件是在Node.js上下文中运行的。
  2. 如果你从node_modules中导入任何东西,那么请确保该包在/package.json > dependencies中指定,而不是在devDependencies中。

安全考虑

使用 "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)。

WARNING

请确保挑选的名称不与现有的Window键相冲突。

在主线程中使用上述代码和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'
}