Quasar CLI with Vite - @quasar/app-vite
为了让 Electron 支持 Typescript，你需要将 /src-electron 目录下的文件扩展名从 .js 改为 .ts，并进行必要的 TS 代码调整。
TIP
@electron/packager 和 electron-builder 从各自的包中导出配置类型。 由于 quasar.config 文件的自动补全依赖于这些类型，electron.packager 和 electron.builder 属性只有在安装了相应的包之后才会获得完整的类型提示。 你可以通过在 Electron 模式下运行构建命令来强制安装所选的打包工具（取决于你的 electron.bundler 选项）：quasar build -m electron
以下是 /src-electron 目录中的文件示例：
import { BrowserWindow, app } from 'electron'
import path from 'node:path'
import os from 'node:os'
import {
registerQuasarRuntime,
resolveElectronAssetsPath
} from '#q-app/electron/main'
// needed in case process is undefined under Linux
const platform = process.platform || os.platform()
async function createWindow() {
/**
* Initial window options
*/
const mainWindow = new BrowserWindow({
icon: resolveElectronAssetsPath('icons/icon.png'), // linux
width: 1000,
height: 600,
useContentSize: true,
webPreferences: {
contextIsolation: true,
// https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
preload: path.join(import.meta.dirname, 'electron-preload.cjs')
}
})
if (import.meta.env.QUASAR_DEV) {
await mainWindow.loadURL(import.meta.env.QUASAR_APP_URL)
} else {
await mainWindow.loadFile('index.html')
}
if (import.meta.env.QUASAR_DEBUG) {
// 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()
})
}
}
void app.whenReady().then(async () => {
await registerQuasarRuntime()
void createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
void createWindow()
}
})
})
app.on('window-all-closed', () => {
if (platform !== 'darwin') {
app.quit()
}
})content_paste
/**
* This file is used specifically for security reasons.
* Here you can access Node.js 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 /src-electron/package.json > dependencies and NOT in devDependencies
*
* Example (injects window.myAPI.doAThing() into renderer thread):
*
* import { contextBridge } from 'electron'
*
* contextBridge.exposeInMainWorld('myAPI', {
* doAThing: () => {}
* })
*
* WARNING!
* If accessing Node functionality (like importing @electron/remote) then in your
* electron-main.ts you will need to set the following when you instantiate BrowserWindow:
*
* mainWindow = new BrowserWindow({
* // ...
* webPreferences: {
* // ...
* sandbox: false // <-- to be able to import @electron/remote in preload script
* }
* }
*/
import { contextBridge } from 'electron'
import { quasarRuntime } from '#q-app/electron/preload'
contextBridge.exposeInMainWorld('quasarRuntime', quasarRuntime)content_paste