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
/**
* 此文件专门用于安全目的。
* 您可以在此通过 Electron 的 contextBridge 功能安全地向渲染进程暴露特权 API，
* 并通过 Electron 的进程间通信（IPC）与主进程进行通信。
*
* 警告！
* preload 脚本的沙箱环境仅提供有限的 Node.js 环境访问能力。
* 请勿尝试在此文件中从 node_modules 导入包或直接使用 Node.js API。
* 应该通过 IPC 与主进程通信，在主进程中访问包和 Node.js 功能。
*
* 将 window.myAPI.doAThing() 注入到渲染进程的示例：
*
* import { contextBridge } from 'electron'
*
* contextBridge.exposeInMainWorld('myAPI', {
* doAThing: () => {}
* })
*
* Preload 脚本文档：
* https://www.electronjs.org/docs/latest/tutorial/tutorial-preload
*/
import { contextBridge } from 'electron'
import { quasarRuntime } from '#q-app/electron/preload'
contextBridge.exposeInMainWorld('quasarRuntime', quasarRuntime)content_paste