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

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

Quasar.config.js

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

// 您是否希望更改默认文件
//（请注意，没有扩展名，因此它同时解析为.js和.ts）
sourceFiles: {
  electronMain: 'src-electron/electron-main',
  electronPreload: 'src-electron/electron-preload'
},

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

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

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

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

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

    inspectPort: 5858,

  extendElectronMainConf (cfg) {
    // do something with Esbuild config
    // for the Electron Main thread
  },

  extendElectronPreloadConf (cfg) {
    // do something with Esbuild config
    // for the Electron Preload thread
  }
}

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

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

如果你想篡改"Renderer"线程（用户界面在/src）Vite配置。

// quasar.config.js
module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.electron) {
          // do something with ViteConf
        }
      }
    }
  }
}

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

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