Electron-builder打包详解

最新推荐文章于 2024-10-01 19:27:44 发布
最新推荐文章于 2024-10-01 19:27:44 发布
阅读量2w 收藏 23
点赞数 1
文章标签： 操作系统 嵌入式 webpack ViewUI
原文链接：https://juejin.im/post/5c886e16e51d45219d442549
版权
本文详细介绍了如何使用Electron-builder进行客户端程序打包，包括基本概念、配置方法、打包目标设置，特别是针对NSIS的配置和解决国内下载问题的策略。提供了一种简单而强大的解决方案，适用于多种平台的打包需求。
摘要由CSDN通过智能技术生成

开发electron客户端程序，打包是绕不开的问题。下面就我在工作中的经验以及目前对electron-builder的了解来分享一些心得。

基本概念

官网的定义

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

关于electron和electron-builder的基础部分这篇文章就跳过了，有兴趣的话可以看这篇文章

如何使用

builder的使用和配置都是很简单的 builder配置有两种方式

  • package.json中直接配置使用（比较常用，我们下面着重来讲这个）
  • 指定electron-builder.yml文件

demo地址会在文章末尾给出（demo项目中electron使用得是V2.0.7版本,目前更高得是2.0.8版本）。

下面是一个简单的package.js中带注释的配置

  1. 基础配置
"build": {  // 这里是electron-builder的配置
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    // windows相关的配置
    "win": {  
      "icon": "xxx/icon.ico"//图标路径 
    }  
  }复制代码

在配置文件中加入以上的文件之后就可以打包出来简单的文件夹，文件夹肯定不是我们想要的东西。下一步我们来继续讲别的配置。 2. 打包目标配置 要打包成安装程序的话我们有两种方式，

  1. 使用NSIS工具对我们的文件夹再进行一次打包，打包成exe
  2. 通过electron-builder的nsis直接打包成exe，配置如下
"win": {  // 更改build下选项
    "icon": "build/icons/aims.ico",
    "target": [
      {
        "target": "nsis" // 我们要的目标安装包
      }
    ]
  },复制代码
  1. 其他平台配置
  "dmg": { // macOSdmg
    "contents": [
      ...
    ]
    },
    "mac": {  // mac
      "icon": "build/icons/icon.icns"
    },
    "linux": { // linux
      "icon": "build/icons"
    }复制代码
  1. nsis配置

这个要详细的讲一下，这个nsis的配置指的是安装过程的配置，其实还是很重要的，如果不配置nsis那么应用程序就会自动的安装在C盘。没有用户选择的余地，这样肯定是不行的

关于nsis的配置是在build中nsis这个选项中进行配置，下面是部分nsis配置


 



                

        

        




    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  weixin_34162695
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
vue3+ts+vite+electron electron-builder等文件打包参数配置说明

				
			

			

				

					Missxu1895的博客
				

				

					04-29
					
					624
					
				

			

		

		

			
				
前端vue3+ts+vite+electron 打包electron-builder.json、electron-builder.yml等配置文件参数说明

			
		

	



                

            
              



	

		

			

				
					
electron-builder打包见解

				
			

			

				

					weixin_34192993的博客
				

				

					10-16
					
					3905
					
				

			

		

		

			
				
开发electron客户端程序，打包是绕不开的问题。下面就我在工作中的经验以及目前对electron-builder的了解来分享一些心得。
基本概念
官网的定义

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto...

			
		

	



              


  
              

                


	

		

			

				
					
Electron打包方式

				
			

			

				

					duansamve的博客
				

				

					08-24
					
					2万+
					
				

			

		

		

			
				
Electron提供了两个打包工具，本文将分别尝试使用两个工具对项目打包，并分析其打出来的包的结构

			
		

	





	

		

			

				
					
Electron应用创建和打包

				
			

			

				

					qq_30386941的博客
				

				

					10-01
					
					1640
					
				

			

		

		

			
				
electron-build相比electron-package功能更丰富些，electron-build打包的项目可以同时打包.zip绿色版和.exe安装版，同时还会能配置是否asar打包，打包结果中海油一个未做任何压缩的版本用于查看打包结果是否正确，electron-build通过配置可以在打包时移动文件目录位置，配置跨平台配置打包等等，当然跨平台配置不是electron-build能够交叉打包，而是在对应的平台进行构建打包。当然也可以手动在任何地方创建目录，cmd中。

			
		

	



		

			
		



	

		

			

				
					
 electron打包：electron-packager及electron-builder两种方式实现（for Windows）

				
			

			

				

					weixin_33713707的博客
				

				

					03-22
					
					583
					
				

			

		

		

			
				
前言

本文主要介绍如何通过electron-packager及electron-builder两种方式，将已有的electron应用打包成msi格式和exe可执行文件。打包是一个成熟的应用程序一个重要的环节，希望这篇文章可以给大家一些参考，最后会讲到打包时遇到的一些坑，与大家分享。
本文适用于有一些electron实践经验的小伙伴，知道...

			
		

	





	

		

			

				
					
Electron-builder打包和自动更新

				
			

			

				

					王谷雨的博客
				

				

					08-14
					
					3212
					
				

			

		

		

			
				
文本主要讲述如何为 electron 打包出来软件配置安装引导和结合 github 的 release 配置自动更新

			
		

	





	

		

			

				
					
electron打包（electron-builder/electron-packager）及打包过程中的报错解决

				
			

			

				

					程序边界
				

				

					04-01
					
					1万+
					
				

			

		

		

			
				
文章目录一、electron-packager二、electron-builder1.`electron-builder`的配置（1）在`package.json`中直接配置nsis配置命令行参数（CLI）Commands(命令):Building(构建参数):Publishing(发布):Deprecated(废弃):Other(其他):Examples(例子):TargetConfigurat...

			
		

	





	

		

			

				
					
electron-vue 打包所需文件

				
			

			

				

					03-23
				

			

		

		

			
				
** Electron-Vue 框架详解 **  Electron-Vue 是一个基于 Vue.js 和 Electron 的桌面应用程序开发框架，它结合了 Vue 的前端开发优势和 Electron 的桌面应用能力，使得开发者可以利用 Web 技术（HTML、CSS、...

			
		

	





	

		

			

				
					
Electron详解（二）：基本使用与项目打包

				
			

			

				

					Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
				

				

					06-21
					
					1万+
					
				

			

		

		

			
				
在使用Electron进行开发之前，您需要安装 Node.js，最低工作版本为 14.x，低于 14 的版本在后面的打包过程中可能会报错。（注意，因为 Electron 将 Node.js 嵌入到其二进制文件中，所以在 electron 应用运行时的 Node.js 版本与你本地电脑中运行的 Node.js 版本无关。（虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。

			
		

	





	

		

			

				
					
如何在vue.config.js中配置electron-builder以实现Electron应用的打包和自动升级功能？

					
最新发布

				
			

			

				

					10-26
				

			

		

		

			
				
 在`vue.config.js`中，你需要添加`electronBuilder`的配置对象，如下所示：   ```javascript  module.exports = {  pluginOptions: {  electronBuilder: {  nodeIntegration: true,  builderOptions: {  appId: '...

			
		

	





	

		

			

				
					
electron-builder 的基本使用

				
			

			

				

					右见小栈
				

				

					12-07
					
					1059
					
				

			

		

		

			
				
将web打包成为桌面应用

			
		

	





	

		

			

				
					
Electron安装c addon问题总结：一 、opencv4nodejs安装配置及问题总结

				
			

			

				

					lovple的博客
				

				

					02-28
					
					3066
					
				

			

		

		

			
				
Electron安装c addon问题总结：一 、opencv4nodejs安装配置及问题总结介绍安装配置问题及解决方法
介绍
Electron安装c addon 编写的modules时经常会遇到各种问题，主要是electron、nodejs版本问题，一定要把安装后的c addon在重新编译成适合当前electron和nodejs的包。
我的环境是window 10 x64位+nodejs 10....

			
		

	





	

		

			

				
					
深入浅出分析Electron打包插件electron-builder配置

				
			

			

				

					baidu_30907803的博客
				

				

					04-15
					
					1958
					
				

			

		

		

			
				
```json
{
  "name": "Umeet",           // 产品名称
  "version": "3.2.0",        // 产品版本
  "private": true,           // 是否私有
  "main": "./src/main.js",   // 程序入口文件
  "author": {                // 发布者信息 win-属性可见,mac在关于Umeet中可见
    "name": "SYSTEC"
  },
  "desc.

			
		

	





	

		

			

				
					
关于electron的问题汇总

				
			

			

				

					jl15988
				

				

					07-26
					
					1668
					
				

			

		

		

			
				
C:\Users\这个是你当前的电脑用户文件夹\AppData\Local\electron-builder。下载上面三个资源包时，会在控制台打印出对应的地址，我们可以复制地址，自己去手动下载，也可以通过。由于网络原因，在进行builder打包时，可能会等很长时间，直到最后还是以失败告终。下（在用户文件夹中找不到appdata文件夹，需要自己手动在地址栏后面加上。，去自己找对应的资源，可以用某些下载软件下载会快一些，然后将它们放到。------  后面遇到其他再加…，往往都是第一个就卡住了。

			
		

	





	

		

			

				
					
Electron 打包问题：electron-builder 下载各种依赖出错

					
热门推荐

				
			

			

				

					布里渊区
				

				

					02-24
					
					2万+
					
				

			

		

		

			
				
写在前面：Electron相关的操作还是不要使用CNPM的操作命令，这样后面会遇到各种问题：比如安装某些依赖的问题；

但是原生的NPM命令又很慢，咋怎呢？有办法！使用smart-npm



安装smart-npm


npm install --global smart-npm --registry=https://registry.npm.taobao.org/

-------------...

			
		

	





	

		

			

				
					
在Window下打包Electron的linux包

				
			

			

				

					linzhi12的博客
				

				

					07-23
					
					8750
					
				

			

		

		

			
				
在Window下打包Electron的linux包
写这份文档主要是记录一下在Window系统下打linux的electron包的一些坑以及方法。
首先，第一次接触的时候，看electron官网中写道可以构建多平台的包，理所当然的以为可以在一个平台下打不同平台的包。于是乎尝试了一下：
报错如下，多方查证度娘，得到的结果是，本来可以。但是由于该服务在去年就挂了之后window环境下就无法打linux的包。好嘛，难道我一定要去liunx下重新搭个环境吗？ 其实不然。
查找过程和解决办法:
首先我使用的elect

			
		

	





	

		

			

				
					
vue配置electron，使用electron-builder进行打包【完整步骤】

				
			

			

				

					CMDN123456的博客
				

				

					08-05
					
					4564
					
				

			

		

		

			
				
vue配置electron，使用electron-builder进行打包【完整步骤】

			
		

	





	

		

			

				
					
Electron在Linux下打包那些事

				
			

			

				

					接着奏乐接着舞的博客
				

				

					09-05
					
					9363
					
				

			

		

		

			
				
我是用的是electron-builder打包工具，要在linux下打包成amd64架构的APPimage文件，以及arm64架构的APPimage文件。ps:appimage是linux下的标准可执行文件，当然你也可以选择其他格式比如deb，但是我感觉还是APPimage比较好，我后续是要在基于linux系统的国产操作系统UOS(统信）下安装，只需要将APPimage文件打包为deb安装包即可。

			
		

	





	

		

			

				
					
Linux下搭建electron-builder打包环境

				
			

			

				

					李荔的博客
				

				

					03-28
					
					1万+
					
				

			

		

		

			
				
本文在deepin15.11，electron@8.0.0， electron-builder@22.3.2环境下编写

1. 全局安装electron-builder
npm install -g electron-builder@22.3.2

2. 在package.json文件中增加打包的配置
{
  "build": {
    "productName":"Electron_Test...

			
		

	





	

		

			

				
					
electron-builder打包linux程序

				
			

			

				

					01-18
				

			

		

		

			
				
根据提供的引用内容，以下是使用electron-builder打包Linux程序的步骤：

1. 确保已经安装了Node.js和npm。可以在终端中运行以下命令来检查是否已安装：
```shell
node -v
npm -v
```

2. 创建一个新的Electron项目，并进入项目目录：
```shell
mkdir my-electron-app
cd my-electron-app
```

3. 初始化项目并安装electron-builder：
```shell
npm init -y
npm install electron electron-builder --save-dev
```

4. 在项目根目录下创建一个`main.js`文件，作为Electron的主进程文件。在`main.js`中编写你的Electron应用逻辑。

5. 在项目根目录下创建一个`index.html`文件，作为Electron的渲染进程文件。在`index.html`中编写你的应用界面。

6. 在`package.json`文件中添加以下脚本：
```json
"scripts": {
  "start": "electron .",
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}
```

7. 执行以下命令来启动Electron应用：
```shell
npm start
```

8. 执行以下命令来打包Linux程序：
```shell
npm run dist --linux
```

9. 打包完成后，你可以在`dist`目录下找到生成的Linux可执行文件。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值