基於安全考量，渲染執行緒（來自 /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” 區段附近）
// Add this at the top:
import path from 'path'
// ...
function createWindow () {
// ...
mainWindow = new BrowserWindow({
// ...
webPreferences: {
// HERE IS THE MAGIC:
preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
}
})/src-electron/electron-preload.[js|ts] 內容範例
// example which injects window.myAPI.doAThing() into the renderer
// thread (/src/*)
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
doAThing: () => {}
})警告
- 請注意，此檔案在 Node.js 環境中執行。
- 如果您從 node_modules 匯入任何內容，請確保套件已在 /package.json > “dependencies” 中指定，而不是在 “devDependencies” 中。
安全考量
僅僅使用 contextBridge 並不代表您所做的一切都是安全的。例如，以下程式碼是不安全的
// BAD code; DON'T!!
contextBridge.exposeInMainWorld('myAPI', {
send: ipcRenderer.send
})它直接公開了一個強大的 API，而沒有任何形式的引數篩選。這將允許任何網站傳送任意 IPC 訊息，而這並非您所希望發生的。公開基於 IPC 的 API 的正確方法是為每個 IPC 訊息提供一個方法。
// Good code
contextBridge.exposeInMainWorld('myAPI', {
loadPreferences: () => ipcRenderer.invoke('myAPI:load-prefs')
})現在，loadPreferences 在您的 javascript 程式碼中全域可用（即：window.myAPI.loadPreferences）。
警告
確保選擇的名稱不會與現有的 Window 鍵衝突。
在主執行緒中使用上述程式碼並以 invoke 呼叫 load-prefs，程式碼會像這樣
ipcMain.handle('myAPI:load-prefs', () => {
return {
// object that contains preferences
}
})預載腳本的自訂路徑
如果您希望更改預載腳本（和/或甚至主執行緒檔案）的位置，請編輯 /quasar.config 檔案
// should you wish to change default files
sourceFiles: {
electronMain: 'src-electron/electron-main.js',
electronPreload: 'src-electron/electron-preload.js'
}