`
shuai1234
  • 浏览: 977758 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

Electron学习笔记Part3-利用Electron builder应用打包EXE

 
阅读更多

HelloWorld写完并能够成功运行了,接下来将这个HelloWorld应用打包成exe安装包,这样就可以拿到其他电脑安装运行了,个人总结两种打包方式,其实现原理相同,但过程不同。

目前刚刚实验利用Electron builder工具进行打包,需要安装Electron builder模块,在cmd中执行命令

 

[plain] view plain copy
 
  1. cnpm install electron builder  

 

 

如图即已安装完成,可至目录中查看安装后的文件

验证electron builder是否安装成功,在cmd中输入build --help,可以获取到帮助信息即为安装成功。

需要在项目文件夹下新建资源文件夹,将程序发布所用的背景图片和图标等资源统一放进资源文件夹进行管理。(打包windows exe需要ico文件像素为256*256)

 

一、单Json文件方式

 

  1. 直接编辑项目文件夹下的package.json文件,添加
    [javascript] view plain copy
     
    1. "author""",<span style="white-space:pre"> </span>//作者  
    2.  "description"""<span style="white-space:pre">    </span>//描述  
  2. 继续添加electron builder编译所需要的属性
    [javascript] view plain copy
     
    1. "build": {  
    2.     "appId""com.leon.HelloWorld02",<span style="white-space:pre"> </span>//包名  
    3.     "copyright":"LEON",<span style="white-space:pre">   </span>//版权  
    4.     "productName":"HelloWorld02",<span style="white-space:pre"> </span>//项目名  
    5.     "dmg":{  
    6.       "background":"res/background.png",<span style="white-space:pre">  </span>//背景图片路径  
    7.       "window":{  
    8. <span style="white-space:pre">  //窗口左上角起始坐标  
    9. </span>        "x":100,<span style="white-space:pre">   </span>  
    10.         "y":100,  
    11. <span style="white-space:pre">  </span>//窗口大小  
    12.         "width":500,  
    13.         "height":300  
    14.       }  
    15.     },  
    16.     "win": {  
    17.         "icon""res/icon.ico"<span style="white-space:pre">    </span>//图标路径  
    18.     }  
    19.   }  
    貌似json文件使用注释会导致一部分编译报错,所以只在文章中写明注释,放到文件中最好将注释删掉。
  3. 完成后在项目文件夹中执行cmd命令:build --win --x64(因为我编译的是windows64位版本,electron builder可同时编译MAC和Linux版本,需要在package.json文件中写明相应的参数)
  4. 执行命令后即开始打包,无报错结束后及打包完成。
  5. (其中有提示告诉我可以升级electron builder到最新版本)
  6. 打包完成后,可以看到项目文件夹中自动生成了两个目录"dist"和"node_modules","node_modules"文件夹是空的,因为我是全局安装的electron,"dist"文件夹中包含一个名为"win-unpacked"的文件夹和一个与package.json文件中name属性相同名称的exe文件,这个文件即是最后打包生成的项目安装文件,"win-unpacked"文件夹打开后可看到一堆零散文件,但其中也包含exe的可执行文件,这是未打包的项目目录。
    二、多json文件方式
  从http://electron.rocks/electron-builder-explained/站点中获取到另一种多json文件的打包方式,虽然不知道与单文件打包有啥区别,但也是另一种文件结构,还是尝试一下。
先看看其目录结构
图中"ea-todo"为项目文件夹,"app"为项目内容文件夹,其中包含index.html、main.js、package.json等程序运行需要的文件,"build"为项目资源文件夹,"dist"与单json文件方式的"dist"文件夹功能相同,用于存放打包后生成的安装文件,package.json文件为开发和打包用的build参数。
  1. 先按其提供的目录结构构建程序。
  2. main.js无需改变。
  3. 修改app/package.json文件内容,网站中的解释是app/package.json文件是关于程序运行需要的内容,

    那就按照网站中的说法改
    [javascript] view plain copy
     
    1. {  
    2.     "name""HelloWorld03",  
    3.     "description""HelloWorld03",  
    4.     "version""0.1.2",  
    5.     "author""LEON",  
    6.     "main""main.js"  
    7. }  
  4. 接下来修改项目文件夹中的package.json,网站中描述其内容为开发用的参数

    继续按网站描述内容修改
    [javascript] view plain copy
     
    1. <pre name="code" class="javascript">{  
    2.     "devDependencies": {  
    3.     "electron-builder""~13.7.0",<span style="white-space:pre">    </span>//可以通过build --version查看electron builder的版本号  
    4.     "electron-prebuilt""^1.4.13"<span style="white-space:pre">    </span>//这玩意儿不知道是啥版本号,照之前的json文档中复制过来的  
    5.           
    6.     },  
    7.     "build": {  
    8.         "appId""com.leon.Hello,World03",  
    9.         "win": {  
    10.             "icon""build/snow.ico"  
    11.         }  
    12.     },  
    13.   
    14.     //下面一段应该是npm运行的代码  
    15.     "scripts": {  
    16.     "postinstall""install-app-deps",  
    17.     "start""electron ./app --enable-logging",<span style="white-space:pre">       </span>//启用日志  
    18.     "dev""NODE_ENV='development' npm run start",<span style="white-space:pre">    </span>  
    19.     "dist""build -w --x64"<span style="white-space:pre">      </span>//编译打包的版本  
    20.     }  
    21.   
    22. }</pre><br>  
    23. <br>  
    24. <pre></pre>  
  5. 修改好后在项目文件夹中cmd运行
    cnpm run start
  6. 无错即打包完成
  7. 查看dist中内容与单json文件方式一样
  8. 双击setup即可安装并运行HelloWorld程序啦!
分享到:
评论

相关推荐

    Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新(包含源码)

    本项目利用`electron-vue`、`electron-builder`和`electron-updater`这三款强大的工具,实现了一个完整的远程更新流程,包括检查更新、下载更新以及自动安装更新。以下将详细介绍这三个组件的功能和实现方式。 **1....

    Vue+Electron(electron-builder + electron-updater + electron-log)

    使用Vue+Electron(electron-builder + electron-updater + electron-log)实现桌面应用程序的开发,面向所有electron使用者学习使用,内部源码都有注释。可参考文章(http://t.csdn.cn/BLM6Y)使用。

    Electron 使用electron-packager、electron-builder打包demo

    3. 打包应用:在项目根目录下运行`electron-builder`,例如`electron-builder`或`electron-builder --mac`,它会根据`package.json`中的配置自动处理打包过程。 在这个“Electron 使用electron-packager、electron-...

    electron-quick-start-exe(cocos打包桌面程序 .exe)

    cocos构建发布,选择发布平台Web Mobile,构建成功将根目录build下生成的web-mobile整个文件夹拷贝到electron-quick-start-exe根目录中,然后执行npm start可以预览效果,npm run package可以进行打包(第一次可能有...

    vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)

    6. **生成.exe文件**:完成以上步骤后,Electron Builder会根据配置将应用打包成.exe可执行文件,通常位于项目的`dist`目录下的相应平台子目录中。 7. **测试与发布**:打包完成后,测试.exe文件是否能在目标系统上...

    electron-quick-start-master 快速入门教程

    electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程...

    electron 使用 electron-builder 打包所需工具 winCodeSign-2.6.0.zip

    3. **运行构建命令**:使用 `npm` 或 `yarn` 运行 `electron-builder` 命令,如 `npm run build --win` 或 `yarn build --win`,`--win` 参数指示仅构建 Windows 平台的包。 4. **验证签名**:完成后,你可以检查...

    龙芯架构electron离线安装包_electron-v6.1.7-linux-mips64el

    标题中的“龙芯架构electron离线安装包_electron-v6.1.7-linux-mips64el”指的是一款专为龙芯架构设计的Electron框架的离线安装包,版本号为6.1.7,适用于Linux操作系统,且是针对mips64el(即MIPS64 Little Endian...

    electron-v8.2.0-win32-x64.zip

    electron使用electron-builder打包必备 ----------------------------------- 8d233c3f165c73d783fa264d16aece35188be7679be466471ec7ab4979b74c36 *electron-v8.2.0-win32-x64.zip 复制以上编码内容到文件:...

    electron-builder打包资源

    macOS: ~/Library/Caches/electron Linux: ~/.cache/electron windows: %LOCALAPPDATA%\electron\cacheWindows例:C:\Users\administrator\AppData\Local\electronC:\Users\administrator\AppData\Local\electron-...

    electron插件:electron-v20.1.1-win32-zip下载

    描述中提到的“electron-builder”是一个用于创建、打包和发布Electron应用的工具。由于国内网络环境可能存在的访问限制,直接通过npm(Node.js的包管理器)安装Electron或其相关插件可能会遇到问题。因此,提供离线...

    electron-quick-start-linux-mips64el.tar.gz

    标题中的"electron-quick-start-linux-mips64el.tar.gz"揭示了这是一个基于Electron框架的快速启动项目,特别为Linux MIPS64el架构进行了优化和打包。MIPS64el是MIPS架构的一种,主要面向64位系统,常见于一些嵌入式...

    electron-builder-binaries-winCodeSign-2.6.0

    在使用Electron-builder构建Windows应用时,winCodeSign会为生成的.exe和.dll文件添加签名,这样,Windows操作系统的内置安全机制就能识别并接受这些文件。签名过程中,开发者需要拥有有效的代码签名证书,这个证书...

    electron打包window应用.exe文件demo

    通过以上步骤,你就可以将Electron应用打包成Windows的.exe文件,使得非开发人员也能轻松运行和使用你的软件。这个"electron打包window应用.exe文件demo"提供了一个实用的起点,帮助你理解和实践这个过程。

    electron-quick-start-master.zip

    3. `electron-builder`或`electron-packager` - 打包工具,用于生成跨平台的应用安装程序。 总结 "electron-quick-start-master.zip"压缩包为我们提供了一个Electron应用的起步示例,通过学习和理解其中的...

    electron-builder 在window上编译时所需文件,直接解压,再将文件名改为cache

    3. **运行构建命令**:在终端中,运行 `npx electron-builder` 或 `yarn electron-builder` 来启动构建过程。这会根据配置生成适用于不同平台的可执行文件。 4. **处理 cache 目录**:在某些情况下,你可能需要清理...

    electron-builder打包过程中报错所需的文件

    学习项目使用的是`vue3`+`typescript`+`vite`+`...比如electron-builder打包过程中会涉及到四个包: 1. electron-v28.1.4-win32-x64 2. winCodeSign-2.6.0 3. nsis-3.0.4.1 4. nsis-resources-3.4.1 安装路径见本人博客

    vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件,无需使用Electron Builder的必需配置。-Vue.js开发

    然后,通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器:vue add electronic-builder就是这样! 您准备好出发了! 要启动开发服务器,请执行以下操作:如果您使用Yarn(强烈建议使用):yarn ...

Global site tag (gtag.js) - Google Analytics