为什么捐赠
API 资源管理器
升级指南
新增!
quasar.config 文件
转换为使用 Webpack 的 CLI
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查器
测试和审计
开发移动应用
Ajax 请求
向公众开放开发服务器
Quasar CLI 与 Webpack - @quasar/app-webpack
配置 Electron

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

但首先,让我们了解如何配置 Electron 构建。

quasar.config 文件

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

// should you wish to change default files
// (notice no extension, so it resolves to both .js and .ts)
sourceFiles: {
  electronMain: 'src-electron/electron-main',
  electronPreload: 'src-electron/electron-preload'
},

// electron configuration
electron: {
  // specify the debugging port to use for the Electron app when running in development mode
  inspectPort: 5858,

  bundler: 'packager', // or 'builder'

  // @electron/packager options
  // https://electron.github.io/packager/main/
  packager: {
    //...
  },

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

  // Specify additional parameters when yarn/npm installing
  // the UnPackaged folder, right before bundling with either
  // electron packager or electron builder;
  // Example: [ 'install', '--production', '--ignore-optional', '--some-other-param' ]
  unPackagedInstallParams: [],

  // optional; add/remove/change properties
  // of production generated package.json
  extendPackageJson (pkg) {
    // directly change props of pkg;
    // no need to return anything
  },

  // optional; webpack config Object for
  // the Main Process ONLY (/src-electron/main-process/electron-main.js)
  extendWebpackMain (cfg) {
    // directly change props of cfg;
    // no need to return anything
  },

  // optional; EQUIVALENT to extendWebpackMain() but uses webpack-chain;
  // for the Main Process ONLY (/src-electron/main-process/electron-main.js)
  chainWebpackMain (chain) {
    // chain is a webpack-chain instance
    // of the Webpack configuration

    // example:
    // chain.plugin('eslint-webpack-plugin')
    //   .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  },

  // optional; webpack config Object for
  // the Preload Process ONLY (/src-electron/main-process/electron-preload.js)
  extendWebpackPreload (cfg) {
    // directly change props of cfg;
    // no need to return anything
  },

  // optional; EQUIVALENT to extendWebpackPreload() but uses webpack-chain;
  // for the Preload Process ONLY (/src-electron/main-process/electron-preload.js)
  chainWebpackPreload (chain) {
    // chain is a webpack-chain instance
    // of the Webpack configuration

    // example:
    // chain.plugin('eslint-webpack-plugin')
    //   .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  }
}

“packager” 属性指的是 @electron/packager 选项dirout 属性被 Quasar CLI 覆盖以确保最佳结果。

“builder” 属性指的是 electron-builder 选项

Packager 与 Builder

您必须选择使用 packager 或 builder。它们都是优秀的开源项目,但它们满足的需求略有不同。使用 packager,您将能够从一台机器(受限制)为所有主要平台构建未签名的项目。虽然这很棒,但如果您只需要快速简便的东西,那么 builder 具有更多平台粒度(和整体完善)。从一台计算机交叉编译您的二进制文件在 builder 中实际上不起作用(或者我们还没有找到方法……)

依赖项优化

默认情况下,根 package.json 文件中的所有 dependencies 都会被安装并嵌入到生产可执行文件中。

这意味着它还将包含您的仅 UI 依赖项,这些依赖项已捆绑在 UI 文件中(因此它会重复它们)。从我们的 CLI 角度来看,我们没有任何通用方法来判断依赖项是否仅为 UI,或者它是否由主/预加载脚本使用,因此我们无法可靠地自动删除它们。

但是,您可以通过使用 quasar.conf > electron > extendPackageJson(pkg) 并覆盖或篡改 package.json 文件中的 dependencies 键来实现此目的。如果您只保留主线程和预加载线程的依赖项,那么这将导致更小的生产可执行文件。