Upgrading Electron
When you add the Electron mode in a Quasar project for the first time you will get the latest version of the Electron package. At some point in time, you will want to upgrade the Electron version.
Before upgrading Electron, please consult its release notes. Are there breaking changes?
# from the root of your Quasar project
$ yarn upgrade electron@latest從 Quasar v1 升級
Quasar v2 的 Electron 模式幾乎完全徹底修改了先前的版本，顯著提升了開發者體驗。此處的一些變更為了確保與 Electron 世界的最新發展相容（為即將到來的上游變更提供更完善的防護）。
改進的概要
- 開箱即用支援 Typescript。只需將 electron-main.js 和 electron-preload.js 重新命名為 electron-main.ts 和 electron-preload.ts 即可。
- 支援 Electron 11 並為即將到來的 Electron 12+ 版本變更準備開箱即用支援（未來無需您進行任何變更）。其中一項變更是我們將使用
contextIsolation而不是已棄用的Node Integration。 - 預載腳本不再有舊的限制。您可以使用相對路徑匯入其他 js 檔案，因為該腳本現在已捆綁並通過 Babel 處理（因此您也可以使用
import X from Y語法）。您也可以為其啟用程式碼檢查。 - 您可以為主線程和預載腳本啟用程式碼檢查。
- 我們已移除預設的 electron-main.dev.js 支援，因為它似乎不再需要。但是，您可以通過建立它並從 electron-main 引用它來重新添加它（Quasar CLI 不再自動偵測到它 – 因為我們不需要；稍後會詳細說明）。
/src-electron 資料夾
舊的結構是
新的結構是
請注意，不再有 electron-main.dev.js 檔案（不再需要），並且 electron-preload/main.js 檔案需要直接移動到 /src-electron 下。
electron-main.js 檔案
為了使我們向前相容於未來版本的 Electron，您需要進行一些小的（但重要的！）變更
mainWindow = new BrowserWindow({
// ...
webPreferences: {
nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION,
// preload: path.resolve(__dirname, 'electron-preload.js')
}
})mainWindow = new BrowserWindow({
// ...
webPreferences: {
// we enable contextIsolation (Electron 12+ has it enabled by default anyway)
contextIsolation: true,
// we use a new way to reference the preload script
// (it's going to be needed, so add it and create the file if it's not there already)
preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
}
})electron-preload.js 檔案
如果您還沒有這個檔案，您將需要它。因此，如果它遺失了，請建立它。沒有它，您將無法在渲染線程中使用 Node.js 的強大功能。
更多資訊：預載腳本。
警告
您將需要將所有 Node.js 的東西從渲染線程（來自 /src 的 UI 程式碼）轉移到預載腳本中。通過 contextBridge 提供相同的功能，如下所示。
這是 electron-preload.js 的預設內容
/**
* This file is used specifically for security reasons.
* Here you can access Nodejs stuff and inject functionality into
* the renderer thread (accessible there through the "window" object)
*
* WARNING!
* If you import anything from node_modules, then make sure that the package is specified
* in package.json > "dependencies" and NOT in "devDependencies"
*
* Example (injects window.myAPI.doAThing() into renderer thread):
*
* const { contextBridge } = require('electron')
*
* contextBridge.exposeInMainWorld('myAPI', {
* doAThing: () => {}
* })
*/quasar.config 檔案變更
electron: {
// it's gone now (upcoming upstream breaking change)
// replaced by a change in electron-main.js documented earlier
nodeIntegration: true, // remove me!
// remove:
chainWebpack (chain) { /* ... */ },
// remove:
extendWebpack (cfg) { /* ... */ }
}electron: {
// New!
inspectPort: 5858,
// New!
extendElectronMainConf (cfg) {
// do something with Esbuild config
// for the Electron Main thread
},
// New!
extendElectronPreloadConf (cfg) {
// do something with Esbuild config
// for the Electron Preload thread
}
}渲染線程 (/src)
$q 物件 不再包含 electron 屬性。您將需要使用預載腳本 來存取它並將其提供給渲染線程。
此外，openURL 工具程式無法再利用 Electron 開啟新視窗。您將需要從預載腳本中提供您自己的工具程式。
警告
您將需要將所有 Node.js 的東西從渲染線程（來自 /src 的 UI 程式碼）轉移到預載腳本中。通過 contextBridge 提供相同的功能，如上面的預載腳本章節所示。
瀏覽器開發者工具
您可能還希望在您的 electron-main.js 中加入以下程式碼，以便在開發模式（或啟用偵錯的生產模式）下自動開啟開發者工具，並在正式版本（未啟用偵錯）中停用開發者工具
function createWindow () {
mainWindow = new BrowserWindow({ /* ... */ })
if (process.env.DEBUGGING) {
// if on DEV or Production with debug enabled
mainWindow.webContents.openDevTools()
}
else {
// we're on production; no access to devtools pls
mainWindow.webContents.on('devtools-opened', () => {
mainWindow.webContents.closeDevTools()
})
}
}