我们会使用 Quasar CLI 来开发和构建 Electron 应用。使用 Quasar CLI 来构建不同类型（SPA、PWA、手机应用、Electron 应用）的项目对我们来说只是运行 “quasar dev” 和 “quasar build” 命令时传入的 “mode” 参数不同而已。
首先，我们先来学习如何针对 Electron 进行配置。
quasar.config 文件
// 如果您希望更改默认的文件路径
// （注意不需要文件扩展名，它会自动解析 .js 和 .ts）
sourceFiles: {
electronMain?: 'src-electron/electron-main',
}electron: {
/**
* 需要嵌入的内容脚本（js/ts）列表。
* 列表中的每个条目应该是 /src-electron/ 目录下的文件名（不带扩展名）
*
* @default [ 'electron-preload' ]
* @example [ 'my-other-preload-script' ]
*/
preloadScripts?: string[];
/**
* 添加/删除/修改生产环境生成的 package.json 的属性
*/
extendPackageJson?: (pkg: { [index in string]: any }) => void;
/**
* 扩展用于 electron-main 线程的 Esbuild 配置
*/
extendElectronMainConf?: (config: EsbuildConfiguration) => void;
/**
* 扩展用于 electron-preload 线程的 Esbuild 配置
*/
extendElectronPreloadConf?: (config: EsbuildConfiguration) => void;
/**
* 您需要选择使用 packager 或 builder 其中之一。
* 它们都是优秀的开源项目，但满足的需求略有不同。
* 使用 packager，您可以从一台机器上为所有主要平台
* 构建未签名的项目。
* 虽然这很好，但如果您只是想快速简单地打包，
* builder 提供了更多平台粒度（和更好的集成）。
* 使用 builder 从一台电脑进行交叉编译
* 并不太可行，或者我们还没找到正确的方法。
*/
bundler?: "packager" | "builder";
packager?: ElectronPackager.Options;
builder?: ElectronBuilder.Configuration;
/**
* 在使用 electron packager 或 electron builder 打包之前，
* 在 UnPackaged 目录中安装依赖时指定额外参数；
* 示例: [ 'install', '--production', '--ignore-optional', '--some-other-param' ]
*/
unPackagedInstallParams?: string[];
/**
* 在开发模式下运行 Electron 应用时使用的调试端口
* @default 5858
*/
inspectPort?: number;
}“packager” 属性对应 @electron/packager 选项。其中的 dir 和 out 属性会被 Quasar CLI 重写以确保最佳效果。
“builder” 属性对应 electron-builder 选项。
如果您想修改"渲染进程"（/src 目录下的 UI 代码）的 Vite 配置：
export default defineConfig((ctx) => {
return {
build: {
extendViteConf(viteConf) {
if (ctx.mode.electron) {
// 修改 viteConf
// 或返回一个对象来深度合并到当前的 viteConf 中
}
},
},
};
});Packager vs. Builder
您需要选择使用 packager 或 builder 其中之一作为 Electron 应用的打包工具。它们都是优秀的开源项目，但满足的需求略有不同。使用 packager，您可以从一台机器上为所有主要平台构建未签名的项目（有一些限制）。如果您想要简单快速地将项目打包成各平台主流的安装包格式，那么请使用 builder，它提供了更多的平台粒度（和更好的集成）。但 builder 无法在一台电脑上进行交叉编译（或者我们还没找到正确的方法…）。
依赖优化
默认情况下，根目录 package.json 中的所有 dependencies 都会被安装并嵌入到生产可执行文件中。
这意味着它也会包含仅用于 UI 的依赖，而这些依赖已经被打包进了 UI 文件中（所以会造成重复）。从 CLI 的角度来看，我们没有通用的方法来判断一个依赖是仅用于 UI 还是被主进程/preload 脚本使用，所以无法自动移除它们。
不过，您可以通过 quasar.conf > electron > extendPackageJson(pkg) 来覆盖或修改 package.json 中的 dependencies。如果只保留主进程和 preload 线程的依赖，将会得到更小的生产可执行文件。