，根据 Ant Design of Angular 的介绍新建项目并打包即可。...我们创建项目使用到关键包 "electron": "^26.1.0" 和 "electron-packager": "^17.1.2"。针对真实的生成环境，我们做了相关的一些调整： 1...../ 代表当前的目录，是要被打包的 electron 应用程序所在的位置 custom-package-name 自定义的最终打包的名称 --platform=win32 指定目标平台是 Window...electron 中整合打包的 dist 文件 我们运行 dist 文件，其实就是起一个本地服务就行了。这里，我们使用 http-server 来运行。...我们 npm run start 运行之后，项目的效果如下图： 参考 Ant Design of Angular 创建您的第一个 electron 应用程序 http-server
打包桌面端，跟前端框架无关，只是想夸一下vue在构建项目上的体验真的好，简单方便，会以yes or no的形式让你完成一个主流的前端框架（回想以前构建angular应用，还要打开help，看一大堆api...，在这一点用户体验上angular真是输了，不知道最近的ng5变没变）。...然后继续运行npm run start，然后白屏（习惯性的首次失败。。），不过问题也很快解决了，因为vue打包项目，默认使用的是绝对路径，所以到这里就有点小问题。解决方法： ?...到这一步，一直非常顺利，然而就在一切都理所应当的时候，打包exe文件出现了问题。 打包exe文件 以上这些东西自己连调带试的搞了1小时左右吧，没看时间，反正我觉得挺快。...然而，之后打包这个exe就花了1个小时还多！心好累。。。 首先，为之前下载好的electron-packager，增加一条启动命令。
前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用，但是有时候我们希望使用 Webpack2 的热部署功能来提高我们的开发效率，使我们在代码修改后能自动立即看到修改后的结果。...scripts 中的 electron 使用 "webpack --target electron-renderer" 来打包js和css，然后仍然使用 electron 来运行应用程序。...scripts 中的 web 使用 "webpack --target web" 打包js和css，同样，后面在使用 webpack-dev-server 时也需要使用 "--target web"选项...scripts 中的 packager 定义了打包程序为一个可执行程序。...打包 electron 应用程序 $ npm run packager 上面程序执行后，会在当前目录下生成 myapp-linux-x64 目录，然后运行 myapp-linux-x64/myapp
说到桌面应用程序，可能更多人会想到使用QT或者JAVA FX去实现，Node.js能实现桌面程序么？可能很多人对这个问题的答案抱着怀疑的态度。...其实在我理解看来electron的角色有点类似于打包工具，我们可以使用H5开发一个网站，然后直接使用打包工具打包成一个app。...接下来我们需要将我们的应用打包生成桌面应用启动文件，打包就需要使用我们刚才一开始安装的依赖：electron-packager。...这句打包命令的意思就是：使用electron-packager包将当前文件目录下的资源命名成niyueling打包到父级的electron-node文件夹。...如果想一次性打包所有操作系统的可执行文件，可以使用命令： electron-packager . niyueling --out ..
前两天看了一下使用 Electron 开发应用程序，今天说说所怎样集成 Electron 和 Webpack2 来打包应用程序。...定义了 app 的入口 scripts 中的 electron 定义了一个命令用来使用 webpack 打包并使用 electron 来运行应用程序 scripts 中的 packager 定义了打包程序为一个可执行程序...electron 应用程序 $ npm run electron 这一步会首先运行 “webpack” 来生成 bundle.js 文件，然后再使用 “electron .”...打包 electron 应用程序 $ npm run packager 上面程序执行后，会在当前目录下生成 myapp-linux-x64 目录，然后运行 myapp-linux-x64/myapp...即可启动打包好的可执行程序。
我有个模版项目是用vue-cli3.x开发的，测试部署已经没问题，突发奇想，能不能打包成exe文件，在桌面运行，开始鼓捣。...1.先将项目打包 yarn build 2.安装electron和electron-packager yarn add electronyarn add electron-packager 3.dist...会在初始化完成并且准备好创建浏览器窗口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。...if (BrowserWindow.getAllWindows().length === 0) { createWindow() }})// 您可以把应用程序其他的流程写在在此文件中 // 代码.../dist/ appname:打包出的exe名称,这里取名为helloworld platform :平台名称（windows是win32） arch: 版本，本例为x64 6.生成exe yarn
项目注意事项 我们需要在node启动的服务器里面（也就是本地服务器中）解决跨域问题 使用nw的时候需要解决不能播放音频的问题 index.html以及静态资源的这些路径问题 4....B 为了解决 当dist文件拖入nw打开 或者 直接打开dist目录的index.html 以及使用electron打包之后 的接口访问跨域问题 import path from 'path...electron npm install electron -g 本地安装 npm install electron --save-dev 打包工具 这里的打包工具我选择的是electron-packager...] } 说一下命令行配置： packager": "electron-packager ....的相关资料 打造你的第一个electron应用 github地址 常用打包工具 Electron: 从零开始写一个记事本app electron打包：electron-packager
安装electron-packager 接下来安装electron-packager ，它也是一个npm模块，是一个用于打包electron应用的工具 npm install -g electron-packager...打包 现在整个过程进行到最后一步，我们需要打包我们自己的应用，那么如何打包，这就需要用到我们先前已经安装的electron-packager 打开命令行我们可以这样使用它： electron-packager...这个参数是当前安装Electron的版本，不知道的可以直接electron就能看到了，我这里是1.4.13，经过改进后如下： electron-packager ....更改图标 如果我们想要更改窗口左上角的图标和任务栏的图标，只需要在打包的命令上加个icon参数就好了 electron-packager . HelloWorld --win --out .....NSIS 打包 Electron 生成exe安装包 NSIS操作简单，而且打包出来的安装包，安装过程和卸载过程都更加正规。推荐使用 一.
前言 使用Electron进行打包通常会用到electron-builder或者electron-packager两种工具。...本文将介绍electron-builder进行DEBUG输出的正确方式来帮助排查打包过程中的各种问题。...这也侧面说明了为什么一般的electron应用程序会很大，因为一份electron应用程序，就有一个node的运行时。...electron-builder调试输出正确方式 electron-builder进行打包的时候，会建议你在此之前使用electron-builder install-app-deps的命令。...实际上，install-app-deps内部依然使用了node-gyp相关知识，关于这一块的知识，读者可以翻阅我之前的文章《node-pre-gyp以及node-gyp的源码简单解析（以安装sqlite3
写在前面 人真的是会变得越来越懒的，也正是人的惰性吧，真的是很讽刺。 关于这个应用程序的开发，断更了很久，但是代码部分还算没落下吧，终于在周一、周二终把这个应用程序写完了。 开发完不是终点。...electron-packager打包 使用如下命令安装： npm install electron-packager --save-dev 安装好之后会在package.json中的devDependencies...内置的autoUpdate进行更新 3、支持CLI和JS API两种使用方式； 3、使用electron-builder打包 electron-builder比electron-packager有更丰富的的功能...除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。考虑到以上几点，我果断选择了electron-builder。...整体感受 万事开头难，在开发环境的搭建及应用程序的打包方面花费的时间是最多，目前网上的博主真的好多，但是靠谱的真的很少，大部分都是复制别人的，真的很坑。
但是假如我们有多个页面，且每个页面需要使用的js文件也不同，那么我们应该怎样打包呢。...安装依赖库 这里准备做个小的演示程序，首先安装一些这个演示程序需要看的第三方库 $ npm install --save-dev electron $ npm install --save-dev electron-packager...定义了 app 的入口 scripts 中的 electron 定义了一个命令用来使用 webpack 打包并使用 electron 来运行应用程序 scripts 中的 packager 定义了打包程序为一个可执行程序...来运行应用程序。 访问不同的页面观察日志输出可以发现每个页面均使用了各自的 bundle.js 文件。...打包 electron 应用程序 $ npm run packager 上面程序执行后，会在当前目录下生成 myapp-linux-x64 目录，然后运行 myapp-linux-x64/myapp
--win --mac --ia32 详细参数：Command Line Interface (CLI) 使用 electron-packager 打包 安装依赖： npm i electron-packager...具体每个字段的值可以看 electron-packager/usage.txt 注： OS X 下打包 Windows 的应用需要安装 Wine才行,electron-packager 需要使用 node-rcedit...electron-builder 打包分析 文件大小分析 因为要达到跨平台的目的，每个 Electron 应用都包含了整个 V8 引擎和 Chromium 内核，以致于一个空的 Electron 项目，...不同的应用程序只需要重新打包好相应的 app.asar 即可。...最后对这个可执行程序的图标等信息进行修改就可以得到我们的应用程序了~ 打包可能存在的问题 electron-builder 打包虽然帮我们把一些文件过滤掉不进行打包，但是我们的项目源码是没有经过任何处理的被打包了进去
/cli 使用 electron-packager 打包 安装依赖： npm i electron-packager --save-dev 打包： electron-packager <sourcedir...V8 引擎和 Chromium 内核，以致于一个空的 Electron 项目，使用 electron-builder--dir 打包后没有压缩的项目文件夹，大小也已经到了 121.1 MB。...如果使用 electron-builder 进行打包，安装程序的大小为 36MB，这个大小是可以接受。 但是上面是一个空的项目，那么一个实际的项目打包之后有多大呢？...不同的应用程序只需要重新打包好相应的 app.asar 即可。...最后对这个可执行程序的图标等信息进行修改就可以得到我们的应用程序了~ 打包可能存在的问题 electron-builder 打包虽然帮我们把一些文件过滤掉不进行打包，但是我们的项目源码是没有经过任何处理的被打包了进去
介绍 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 基于 Chromium 和 Node.js 让你可以使用 HTML, CSS 和 JavaScript 构建应用.../electron/ 打包 注意：图标格式 Windows 下使用的 icon.ico Mac 使用的是 icon.icns 使用electron-forge 安装 npm install --save-dev...@electron-forge/cli npx electron-forge import 使用 npm run make 打包参数配置 package.json文件里的config => forge...=> packagerConfig 使用electron-packager 安装 npm install --save-dev electron-packager 使用 npx electron-packager...因此，您可以导入Chrome应用程序中不容易使用的许多模块 Electron文档要好得多 缺点 不适合开发轻量级的应用。即使一个electron的项目框架，也包含chromium内核。
打包项目 Electron的打包工具有很多，例如 electron-builder、electron-packager 或 electron-forge。...这些工具可以帮助我们将 Electron 应用程序打包为可执行文件，并根据目标平台生成相应的安装程序或应用程序包。...electron-packager：是另一个常用的打包工具，支持将 Electron 应用程序打包为各个平台的可执行文件，如 Windows、Mac 和 Linux 等。...使用 electron-forge 将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架： npm install --save-dev @...make" }, 使用 Forge 的 make 命令来创建可分发的应用程序： npm run make Electron-forge 会创建 out 文件夹，您的软件包将在那里找到： // Example
例子：your need a hero 在这个例子里面我将会创建一个简单的应用，它会使用 Marvel API 拉取25位超级英雄的信息并且显示他们的名字和缩略图，创建完成之后的应用会有一个应用图标，最终使用的用户不会知道到应用是如何被创建的也不能看到程序的源代码...打包应用程序 打包代码成为一个 原生应用非常简单只需要一个应用图标，它的外观和文件类型取决于你的应用运行的操作系统，我在这里使用的图标来自Marvel官方的安卓APP。 ?...最简单的打包方法是使用 electron-packager，这是一个npm模块（注意:需要单独安装），他可以生成一个体积比较大的二进制文件，当然对于桌面应用来讲这应该不算是什么大问题，如果你比较在意体积大小...在命令行使用如下命令打包你的应用（替换为你的项目相关的参数）： `electron-packager /Users/chrisward/Workspace/sp_electron MarvelBrowse...我写这篇文章使用 Atom，我与编辑联系使用Slack ，我用来测试程序使用的Docker容器通过 Kitematic创建，他们都是使用Electron生成的应用程序。
toc Electron打包 Electron自动更新 Mac 版本签名 自动更新服务端 Electron打包 Electron代码编写之后便是打包， 官网 介绍了几种方法，用了 electron-packager...use from cli npm install electron-packager -g 以及打包 electron-packager <sourcedir> <appname>...： electron-packager ./ --all 打包Mac版就可以这样 electron-packager ./ --platform=darwin --arch=x64 打包完会在项目根目录下生成打包文件的目录...)，所以在打包的时候需要附带签名信息，具体的可以参考 electron-osx-sign Mac App Store版不能有自动更新，非Mac App Store版打包命令 electron-packager...打包后的app有200～300M)上传下载速度(大家可以通过Hipo cloudkit测试)，因此就考虑使用CloudKit。
使用的Demo:electron-quick-start 打包工具:electron-packager 安装 1.Electron是基于Node.js开发的，第一步当然要安装node盒npm了，就不多说了...electron-builder electron-packager 第一个工具是建立安装程序，打包成.exe和.app的话，我们选择第二个。...6.参考了网上的很多教程，其实也就几个版本，说的都一样，我都没搞定，还是自己动手，丰衣足食。仔细看看，项目仓库的README.md说的很清楚，有几点需要注意。...简单的使用 cd electron-quick-start //项目目录 electron-packager ./ Hello -all //-all 其实就是 --platform=all --arch...=all （在usage.txt里有解释） 可能会重新下载Electron安装包，几十M，等了十几分钟，速度还是几K，看看当前的Electron版本，强制使用当前的版本。
", "..."] } 另外，在打包Electron应用程序时，您需要定义整个ASAR头的十六进制编码哈希 启用ASAR完整性后，您的Electron应用程序将在运行时验证ASAR存档的头部哈希。...提供此打包哈希的过程对于 macOS 和Windows 是不同的 1) 使用 Electron Forge 和 Electron Packager Electron Forge和Electron Packager...ASAR完整性所需的最低版本为： @electron/packager@18.3.1 @electron/forge@7.4.0 2) 使用其他构建系统 MacOS 为macOS打包时，您必须在打包的应用的..."9d1f61ea03c4bb62b4416387a521101b81151da0cfbe18c9f8c8b818c5cebfac" } ] 有关实现示例，请参见 Electron Packager...，之后同样使用 Electron Forge 打包，之后使用原本正常的头部替换掉不正常的头部，再将组合成的恶意asar文件替换到正常的文件，我们看一下，此时程序是否正常，是否能够发现篡改行为 1) 生成恶意
打包这些流程我相信大家都已经知道了吧，不管你是vue cli 2 还是vue cli 3 打包出来都是有dist 文件的，至于前面的操作不懂的这些可以百度，多得很，我就直接给你们讲，如何打包桌面应用就好...进入文档，你就会发现，我去，有很多都不知道是什么操作，但是不用知道，你就知道是打包工具就好，用git 命令去拉取官网的这个代码，他这个代码也可以，但是如果你是vue 的同学，你想直接搞份demo 来修改就可以运行看到效果的...# 进入这个仓库 $ cd electron-quick-start # 安装依赖并运行 $ npm install && npm start 这是官网的demo ，可以下载来运行 好了，我相信你肯定不愿意打包..."electron_dev": "npm run build && electron build/electron.js", "electron_build": "electron-packager...如果出现这个了，恭喜了，vue打包桌面应用程序已经完成了，但是你这个要是想发给别人安装看，你这个还不行哟，还需要进行打包才能哟，推荐一个简单的 看完另一篇新博客有讲解 https://blog.csdn.net
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
