写完 Electron 后，我好像对 PyQt5 变心了

州的先生

发布于 2021-12-01 17:55:26

2.4K0

发布于 2021-12-01 17:55:26

文章被收录于专栏：州的先生州的先生

在上一篇文章中，州的先生介绍了使用 Electron 为 MrDoc 开发一个跨平台的桌面客户端的事情：

用 Django + Electron + Vue 写一个桌面文档客户端

趁着周末的间隙，州的先生继续把这个桌面客户端的功能陆陆续续地完善了。目前已经包含了如下的功能：

MrDoc 服务的配置；
文集列表的获取；
文集的搜索；
文集的新建；
文集文档列表的获取；
文档的搜索
文档内容的获取；
文档内容的修改；
新建文档；
退出确认提示；
图标配置；
快捷键修改/发布文档；

至此，MrDoc 桌面客户端这一版的功能基本上达到了可用的状态。

然后便开始了打包的测试，Electron 是可以打包成 Windows、Linux、macOS 的应用的。

因为开发机器是 Windows，便直接打包成 Windows 测试其效果了。

打包配置

在vue.config.js文件中对electronBuilder进行配置：

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            builderOptions: {
                // 设置打包之后的应用名称
                productName: 'MrDoc桌面客户端',
                win: {
                  icon: 'resources/icon/logo.ico',
                  // 图标路径 windows系统中icon需要256*256的ico格式图片，更换应用图标亦在此处
                  target: [{
                    // 打包成一个独立的 exe 安装程序
                    target: 'nsis',
                    // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大
                    arch: [
                      'x64'
                      // 'ia32'
                    ]
                  }]
                },
                dmg: {
                  contents: [
                    {
                      x: 410,
                      y: 150,
                      type: 'link',
                      path: '/Applications'
                    },
                    {
                      x: 130,
                      y: 150,
                      type: 'file'
                    }
                  ]
                },
                linux: {
                  // 设置linux的图标
                  icon: 'resources/ico/logo.png',
                  target: 'AppImage'
                },
                mac: {
                  icon: 'resources/ico/icon.icns'
                },
                files: ['**/*'],
                extraResources: {
                  // 拷贝dll等静态文件到指定位置,否则打包之后回出现找不大dll的问题
                  from: 'resources/',
                  to: './'
                },
                asar: false,
                nsis: {
                  // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
                  oneClick: false,
                  // 允许请求提升。如果为false，则用户必须使用提升的权限重新启动安装程序。
                  allowElevation: true,
                  // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
                  allowToChangeInstallationDirectory: true,
                  // 安装图标
                  installerIcon: 'resources/icon/logo.ico',
                  // 卸载图标
                  uninstallerIcon: 'resources/icon/logo.ico',
                  // 安装时头部图标
                  installerHeaderIcon: 'resources/icon/logo.ico',
                  // 创建桌面图标
                  createDesktopShortcut: true,
                  // 创建开始菜单图标
                  createStartMenuShortcut: true
                }
            }
        }
    }
}

执行打包

随后，直接在项目目录下执行命令：npm run electron:build：