我们将使用 Quasar CLI 开发和构建一个 Electron 应用。构建 SPA、PWA、移动应用或 Electron 应用之间的区别仅仅取决于 “quasar dev” 和 “quasar 构建” 命令中的 “mode” 参数。
¥We’ll be using Quasar CLI to develop and build an Electron App. The difference between building a SPA, PWA, Mobile App or an Electron App is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.
首先，让我们学习如何配置 Electron 构建。
¥But first, let’s learn how we can configure the Electron build.
quasar.config 文件(quasar.config file)
¥quasar.config file
// should you wish to change default files
// (notice no extension, so it resolves to both .js and .ts)
sourceFiles: {
electronMain?: 'src-electron/electron-main',
}electron: {
/**
* The list of content scripts (js/ts) that you want embedded.
* Each entry in the list should be a filename (WITHOUT its extension) from /src-electron/
* * @default [ 'electron-preload' ]
* @example [ 'my-other-preload-script' ]
*/
preloadScripts?: string[];
/**
* Add/remove/change properties of production generated package.json
*/
extendPackageJson?: (pkg: { [index in string]: any }) => void;
/**
* Extend the Esbuild config that is used for the electron-main thread
*/
extendElectronMainConf?: (config: EsbuildConfiguration) => void;
/**
* Extend the Esbuild config that is used for the electron-preload thread
*/
extendElectronPreloadConf?: (config: EsbuildConfiguration) => void;
/**
* You have to choose to use either packager or builder.
* They are both excellent open-source projects,
* however they serve slightly different needs.
* With packager you will be able to build unsigned projects
* for all major platforms from one machine.
* Although this is great, if you just want something quick and dirty,
* there is more platform granularity (and general polish) in builder.
* Cross-compiling your binaries from one computer doesn’t really work with builder,
* or we haven’t found the recipe yet.
*/
// This property definition is here merely to avoid duplicating the TSDoc
// It should not be optional, as TS cannot infer the discriminated union based on the absence of a field
// Futhermore, making it optional here won't change the exported interface which is the union
// of the two derivate interfaces where `bundler` is set without optionality
bundler?: "packager" | "builder";
packager?: ElectronPackager.Options;
builder?: ElectronBuilder.Configuration;
/**
* Specify additional parameters when installing dependencies in
* the UnPackaged folder, right before bundling with either
* electron packager or electron builder;
* Example: [ 'install', '--production', '--ignore-optional', '--some-other-param' ]
*/
unPackagedInstallParams?: string[];
/**
* Specify the debugging port to use for the Electron app when running in development mode
* @default 5858
*/
inspectPort?: number;
}“packager” 属性引用 @electron/packager options。Quasar CLI 会覆盖 dir 和 out 属性，以确保获得最佳效果。
¥The “packager” prop refers to @electron/packager options. The dir and out properties are overwritten by Quasar CLI to ensure the best results.
“builder” 属性引用 electron-builder 选项。
¥The “builder” prop refers to electron-builder options.
如果你想要篡改 “渲染器” 线程（UI 位于 /src 目录）的 Vite 配置：
¥Should you want to tamper with the “Renderer” thread (UI in /src) Vite config:
export default defineConfig((ctx) => {
return {
build: {
extendViteConf (viteConf) {
if (ctx.mode.electron) {
// do something with viteConf
// or return an object to deeply merge with current viteConf
}
}
}
}
})打包器 vs. 构建器(Packager vs. Builder)
¥Packager vs. Builder
你需要选择使用打包器还是构建器。它们都是优秀的开源项目，但服务的需求略有不同。使用打包程序，你将能够在一台机器上为所有主流平台构建未签名的项目（有限制）。虽然这很棒，但如果你只是想要一些快速而粗略的操作，那么构建器中还有更精细的平台粒度（和常规优化）。在一台计算机上交叉编译二进制文件实际上无法与构建器配合使用（或者我们还没有找到方法……）。
¥You have to choose to use either packager or builder. They are both excellent open-source projects, however they serve slightly different needs. With packager you will be able to build unsigned projects for all major platforms from one machine (with restrictions). Although this is great, if you just want something quick and dirty, there is more platform granularity (and general polish) in builder. Cross-compiling your binaries from one computer doesn’t really work with builder (or we haven’t found the recipe yet…)
依赖优化(Dependencies optimization)
¥Dependencies optimization
默认情况下，根 package.json 文件中的所有 dependencies 都会安装并嵌入到生产可执行文件中。
¥By default, all dependencies from your root package.json file get installed and embedded into the production executable.
这意味着它还将包含你的仅 UI 依赖，这些依赖已打包在 UI 文件中（因此会重复它们）。从我们的 CLI 角度来看，我们没有任何通用的方法来判断依赖是仅用于 UI 还是由主/预加载脚本使用，因此我们无法可靠地自动删除它们。
¥This means that it will also include your UI-only deps, which are already bundled in the UI files (so it will duplicate them). From our CLI perspective, we don’t have any generic way of telling whether a dependency is UI only or if it’s used by the main/preload scripts, so we cannot reliably auto-remove them.
但是，你可以使用 quasar.conf > electron > extendsPackageJson(pkg) 并覆盖或篡改 package.json 文件中的 dependencies 键来实现此目的。如果你只保留主线程和预加载线程依赖，那么这将导致生产可执行文件更小。
¥However, you can do this by using quasar.conf > electron > extendPackageJson(pkg) and overwriting or tampering with the dependencies key from your package.json file. If you leave only the main & preload threads depdendencies then this will lead to a smaller production executable file.