我们将使用Quasar CLI开发和构建一个Electron应用。 构建SPA，PWA，移动APP或Electron应用之间的区别仅由“quasar dev”和“quasar build”命令中的“mode”参数决定。

但首先，让我们学习对Electron构建如何配置。

Quasar.conf.js

您可能会注意到/ quasar.conf.js包含一个名为’electron`的属性。

electron: {
    bundler: 'packager', // 或者'builder'

  // electron-packager选项
  // https://electron.github.io/electron-packager/master/
  packager: {
    //...
  },

  // electron-builder选项
  // https://www.electron.build/configuration/configuration
  builder: {
    //...
  },

  // -- @quasar/app v1.4.2+ --
  // 在yarn/npm安装UnPackaged文件夹时，
  // 即在与electron打包器或electron构造器捆绑在一起之前，
  // 请指定其他参数；
  // 例如: [ '--ignore-optional', '--some-other-param' ]
  unPackagedInstallParams: [],

  // -- @quasar/app v1.3+ --
  // 更多信息：https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
  nodeIntegration: true,

  // -- @quasar/app v1.9.5+ --
  // 可选; 添加/删除/更改生产版本
  // 生成的package.json的属性
  extendPackageJson (pkg) {
    // 直接更改pkg的属性;
    // 不需要返回任何东西
  },

  // 可选的; 
  //仅限主进程(/src-electron/main-process/)的webpack配置对象
  extendWebpack (cfg) {
    // 直接改变cfg的属性;
    // 不需要返回任何东西
  },

  // 可选的; 等同于extendWebpack()但使用webpack-chain;
  // 仅适用于主进程（/src-electron/main-process/）
  chainWebpack (chain) {
    // chain是Webpack配置的
    // webpack-chain实例
  }
}

“packager”属性请参考electron-packager选项。 Quasar CLI重写了dir和out属性以确保获得最佳结果。

"builder"属性请参考electron-builder选项。

打包器(Packager) vs. 构建器(Builder)

您必须选择使用打包器或构建器。 它们都是优秀的开源项目，但它们的需求略有不同。 使用打包器，您将能够从一台计算机为所有主要平台构建未签名的项目。 虽然这很好，但如果你只是想要快速和不完美的东西，那么构建器中有更多的平台粒度（而且通常优雅）。 从一台计算机交叉编译您的二进制文件并不真正适用于构建器（或者我们还没有找到配方…）