quasar+electron+webpack+vue3+ts

quasar：https://quasar.dev/quasar-cli-webpack/developing-electron-apps/introduction 

node：16.15.0

npm：8.5.5

electron：24.1.2

1. 增加quasar Electron模式

quasar mode add electron

 

 

 

     2. 开始开发 

quasar dev -m electron

    3. 配置quasar.config.js

    这里我是用的是builder，electron-builder就是有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。

   // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/developing-electron-apps/configuring-electron
    electron: {
      bundler: "builder", // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',
        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: "manager",
      },

      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
      chainWebpackMain(/* chain */) {
        // do something with the Electron main process Webpack cfg
        // extendWebpackMain also available besides this chainWebpackMain
      },

      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
      chainWebpackPreload(/* chain */) {
        // do something with the Electron main process Webpack cfg
        // extendWebpackPreload also available besides this chainWebpackPreload
      },
    },

到此套壳完成，下一篇我会介绍下我是如何完成主进程和渲染进程通信的。

如果对您有所帮助点赞走一波~~~

如需转载请注明出处！