Electron-Vue 打包配置

2022-06-25 本文已影响0人流云陌路

Electron-Vue 发布App应用的默认打包的安装包，名称不能设置中文，logo是默认，不能自定义安装等等问题，就我自己的情况，就以下三个内容进行说明

如何更换应用名称
如何更换应用Logo
如何自定义安装

环境

vue3
electron13
electron-builder
...

其它不多说先看配置vue.config.js文件的部分内容

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
      electronBuilder: {
          nodeIntegration: true,
          externals: ['serialport'],
          builderOptions: {
              "productName": "Build串口调试Api工具",
              "appId": "com.apitool",
              "win": {
              },
              //window自动义安装
              "nsis": {
                  "oneClick": false,            //是否静默安装（一键式安装）
                  "perMachine": true,           //安装模式 true=所有用户 false=自己
                  "allowElevation": true,       //允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序
                  "allowToChangeInstallationDirectory": true,   //是否安装时是否能更换安装目录
                  "createDesktopShortcut": true,    //是否创建桌面快捷建
                  "menuCategory": true,             //是否在开始菜单里创建子菜单
                  "installerIcon":  "build/icons/icon.ico",     //安装应用的图片,一定要 ico格式的图片
                  "installerSidebar": "public/logo.bmp",   //安装程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
                  "uninstallerSidebar": "build/icons/uninstall.bmp",   //安装程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
                  "include": "scripts/installer.nsi"
              }
          }
      }
  }
})

上页的配置，以我实际的需求进行的简单，至于更多的配置内容详情可以查看官方文档 nsis配置文件，在这里也可以查看其它平台安装的。

如何更换应用名称

更换应用名称的方法两个，一是在package.json中增加一个producteName属性，这个属性是可以设置为中文的（name属性只能用英文），二是在vue.confog.js中配置，如上面的文件所示那样。vue.config.js 中的配置是最高级

如何更换应用Logo

因为Logo所要的尺寸有点多，这里要安装一个依赖工具electron-icon-builder，这个工具可以自动生成多个不一样的尺寸，是一个很方便工具。同时重点说明一下electron-builder默认使用的图片路径是build与package.json同级，这应该算是隐性规则，要注意

npm i electron-icon-builder --D

通过安装上面的工具后，在package.json配置命令,增加electron:icon-builder命令，如下所示

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",

    "electron:icon-builder": "electron-icon-builder --input=./public/logo.png --output=build --flatten",

    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },

关于electron:icon-builder,它有三个参数

--input 输入的文件路径，相对于当前文件而言
--output 输出的文件夹，这个最好固定的build，原因上面有说明
--flatten 是否压塑，没有值

配置完成后执行下面命令,就会生成 build目录，这个时候再打包生成的应用及安装包的图标就是 logo.png ，logo.png不能太大，最好不要起过1M。小，清楚就可以

yarn electron:icon-builder

如何自定义安装

electron-builder打包后默认的安装方便是便捷式的，没有欢迎界面，也不能自己选择安装目录等问题，上页的主体配置文件与给说明，现在看一下关键位置的配置信息

  "nsis": {
                  "oneClick": false,          //是否静默安装（一键式安装）
                  "perMachine": true,             //安装模式 true=所有用户 false=自己
                  "allowElevation": true,         //允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序
                  "allowToChangeInstallationDirectory": true,   //是否安装时是否能更换安装目录
                  "createDesktopShortcut": true,    //是否创建桌面快捷建
                  "menuCategory": true,             //是否在开始菜单里创建子菜单
                  "installerIcon":  "build/icons/icon.ico",     //安装应用的图片,一定要 ico格式的图片
                  "installerSidebar": "public/logo.bmp",   //安装程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
                  "uninstallerSidebar": "build/icons/uninstall.bmp",   //卸载程序左边的图片，一定是要位图 bmp 格式 一定要 164*314
                  "include": "scripts/installer.nsi"
  }

都有文字说明，应该都挺好理解，这里重点说一下installerIcon,installerSidebar,installerSidebar,这个图片路径设置，这个路径是相对于vue.config.js或是相对于build同级目录都可以，目前配置都是基于build的同级路径

关于include的配置的文件 scripts/installer.nsi 这个是window的安装配置，目前对于这一块不很懂，详情可以nsis的教程，但给个最基本的内容，供参考（也是网上找的，但测试过能用）

; HM NIS Edit Wizard helper defines
!include "MUI2.nsh"

;  MUI Settings
!define MUI_ABORTWARNING

; 欢迎页面
!insertmacro MUI_PAGE_WELCOME

ShowInstDetails show
ShowUnInstDetails show
SpaceTexts show

; 安装脚本
!macro customInstall

!macroend

大概意思是
引入现代用户界面,相关于类库
预定义常量
定义宏
设置属性
执行自动安装

关于这一块更多还是要看nsis文档，不对之处，欢迎留言指正。

The End

Electron-Vue 打包配置

环境

猜你喜欢

热点阅读