1、打包配置

在vue.config.js中

  pluginOptions: {electronBuilder: {builderOptions: {win: {icon: './public/app.ico'},mac: {icon: './public/app.png'},productName: 'AppDemo'}}}

以上为配置图标和app的名字。

2、运行npm run electron:build

运行命令后，可能出现
app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDE（错误语句的局部）这个错误

找到electron和electron-builder的cache缓存记录文件夹
electron缓存资源地址：~/AppData/Local/electron/Cache
electron-builder缓存资源地址：~/AppData/Local/electron-builder/Cache
根据错误提示手动下载资源包，在错误提示中，可以找到一个地址，拷贝这个地址输入浏览器地址栏进行下载。
可能要反复这个步骤，因为有多个包。
下载➡拷贝➡打包➡报错➡根据错误信息中的地址再下载➡拷贝➡打包
下载完成后拷贝到相应的文件夹
对应的文件夹位置如图
3.1 electron文件存储方式

3.2 electron-builder文件存储方式

3.2.1 nsis文件存储方式

这里要把拷贝进来的nsis-3.0.4.1文件夹解压到当前文件夹的同名文件夹内
3.2.2 winCodeSign存储方式

3、打包完成后

在dist_electron目录下生成build后的产品

其实就win-unpacked和AppDemo Setup 0.1.0.exe有用。
其中win-unpacked文件夹为免安装文件夹，直接点击里面的.exe就可打开程序；
AppDemo Setup 0.1.0.exe为安装文件夹，点击之后进行安装。

4、安装时能够指定文件夹

点击AppDemo Setup 0.1.0.exe后，软件就自动安装到默认的位置去了。如何让用户手动选择安装位置
在vue.config.js中，pluginOptions下的electronBuilder下的builderOptions中
添加如下代码配置nsis

 nsis: {oneClick: false,allowToChangeInstallationDirectory: true},

注意，在vue-cli-3后，打包的配置不再放到根目录的package.json当中的buidl选项中，放到vue.config.js的builderOptions下。

vue.config.js的pluginOptions中，nsis配置的位置如下：

  pluginOptions: {electronBuilder: {builderOptions: {win: {icon: './public/app.ico'},mac: {icon: './public/app.png'},nsis: {oneClick: false,allowToChangeInstallationDirectory: true},productName: 'AppDemo'}}}

nsis全名为Nullsoft Scriptable Install System，是一个开源的 Windows 系统下安装程序制作程序。它提供了安装、卸载、系统设置、文件解压缩等功能。这如其名字所指出的那样，NSIS 是通过它的脚本语言来描述安装程序的行为和逻辑的。NSIS 的脚本语言和通常的编程语言有类似的结构和语法，但它是为安装程序这类应用所设计的。

nsis 键包含一组选项，指示 Electron-builder 如何构建 nsis 目标。这些选项也适用于 Web 安装程序，使用顶级 nsisWeb 密钥。

一些nsis 配置项：

        nsis: {oneClick: false, // 是否一键安装allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: "./build/icons/aaa.ico", // 安装图标uninstallerIcon: "./build/icons/bbb.ico", // 卸载图标installerHeaderIcon: "./build/icons/aaa.ico", // 安装时头部图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标shortcutName: "xxxx", // 图标名称include: "build/script/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。},

electron打包的一些问题相关推荐

electron打包可选择安装位置，可自动更新
Electron打包调参软件(windows版) ----------------------------------可选安装位置,可自动更新,手动更新一:引包:electron,electron- ...
electron打包现成的vue项目成.exe文件，build打包vue项目（quasar 框架）
前言: 公司已有web端vue项目,现在有需求,需要把web端的该项目用electron打包成 .exe 可执行文件. 思考:打包成 .exe 文件,首先需要将vue项目在本地打包成静态可运行文件,其 ...
electron打包vue-cli4项目的解决方案1（项目实测）
背景: 项目已通过vue-cli4框架开发并运行在nginx服务器上(使用了nginx的反向代理),现需要将该项目转成桌面端应用程序,选择electron来实现. 设想2种解决方案: 1.使用elec ...
Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application
Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application 参考文章: (1)Electron 打包 ...
Electron打包方式
Electron提供了两个打包工具,本文将分别尝试使用两个工具对项目打包,并分析其打出来的包的结构. 一.使用electron-builder打包 https://github.com/electro ...
electron打包应用再win7无法启动解决方案
问题: electron打包后的app,在win7的某些电脑(非管理员的情况下有一定概率出现)双击软件安装后生成的快捷方式,然后啥事情也没有发生,但是打开控制台可以看到应用的进程启动一下然后快速被关掉 ...
为Electron 打包后的桌面程序添加自定义向导
Electron打包简介内容创建package.json 下载打包依赖添加打包配置----在srcripts下面添加build(此处添加自定义安装向导向导) 配置信息说明 Boolean St ...
Electron打包（windows平台）
文章目录一.设置npm环境(为了解决打包时下载某些依赖包慢.下载不了的问题): 二.使用electron-packager打包: 1.安装electron-packager 2.快速打包命令: 3. ...
Vue-Cli4.x项目通过electron打包桌面应用程序
发现网上的教程大部分都是vue2.x目录结构不太一样还有就是将一些问题整合在一起傻瓜式教程步骤一下载electron的demo项目 electorn GitHub 下载demo electro ...
electron打包太慢解决方法
2019独角兽企业重金招聘Python工程师标准>>> electron打包太慢解决方法 npm源太慢可以用阿里云的npm也就是cnpm不过不推荐因为我用阿里云的npm的时候打包总 ...

electron打包的一些问题

1、打包配置

2、运行npm run electron:build

3、打包完成后

4、安装时能够指定文件夹

electron打包的一些问题相关推荐

最新文章

热门文章