一、安装 electron-packager
PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 “main”: “app/main.js”的路径(去掉app/),不这样子的话,下面打包的时候会报错,有的版本识别不了应用路径。
1、使用命令 npm install --save-dev electron-packager
将electron-package包安装到在项目下面,
安装完成之后,项目根目录下面的package.json文件里,会多出一条electron-package的版本号配置信息
二、正式打包
有两种方法:
1、直接使用命令打包,electron-packager的打包基本命令是:
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
- 1
命令说明:
* location of project:项目所在路径
* name of project:打包的项目名字
* platform:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux)
* architecture:决定了使用 x86 还是 x64 还是两个架构都用
* electron version:electron 的版本
* optional options:可选选项
命令比较长,每次要是都用这个命令来打包会很烦,可以使用第二种方法;
2、首先在项目根目录下面的 package.json 里添加代码, "packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的;
具体添加位置如图,
然后,在使用命令 npm run-script packager
最后,打包完成之后如图
运行对应包下的.exe文件,就可以看到我们的应用了。
转载自http://blog.csdn.net/arvin0/article/details/52690023
参数设置可参考下面,也是转载自某网友
- {
- "name": "hosts",
- "version": "2.0.1",
- "description": "",
- "main": "main.js",
- "scripts": {
- "start": "concurrently \"NODE_ENV=dev electron .\" \"webpack-dev-server --inline --hot --port 8080\"",
- "packageDarwin": "electron-packager . 'Hosts' --platform=darwin --arch=x64 --icon=hosts.icns --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"",
- "packageWin": "electron-packager . 'Hosts' --platform=win32 --arch=x64 --icon=hosts.ico --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
- "packageLinux": "electron-packager . 'Hosts' --platform=linux --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
- "prepackage": "rm -rf build && webpack --config webpack.config.prod.js && rm -rf dist",
- "package": "npm run packageDarwin && npm run packageWin && npm run packageLinux"
- },
- "author": "Howard.Zuo",
- "license": "MIT",
- "devDependencies": {
- "autoprefixer": "^6.7.6",
- "babel-core": "^6.23.1",
- "babel-loader": "^6.3.2",
- "babel-plugin-component": "^0.9.0",
- "babel-plugin-transform-object-rest-spread": "^6.23.0",
- "babel-plugin-transform-runtime": "^6.23.0",
- "babel-preset-es2015": "^6.22.0",
- "concurrently": "^3.4.0",
- "css-loader": "^0.26.2",
- "electron-packager": "^8.5.2",
- "electron-prebuilt": "^1.4.13",
- "file-loader": "^0.10.1",
- "html-webpack-plugin": "^2.28.0",
- "postcss-loader": "^1.3.3",
- "postcss-nested": "^1.0.0",
- "postcss-simple-vars": "^3.0.0",
- "style-loader": "^0.13.2",
- "vue-hot-reload-api": "^2.0.11",
- "vue-html-loader": "^1.2.4",
- "vue-loader": "^11.1.3",
- "vue-style-loader": "^2.0.3",
- "vue-template-compiler": "^2.2.1",
- "webpack": "^2.2.1",
- "webpack-dev-server": "^2.4.1"
- },
- "dependencies": {
- "element-ui": "^1.2.3",
- "hostile": "^1.3.0",
- "sudo-prompt": "^6.2.1",
- "vue": "^2.2.1"
- }
- }
相关推荐
1. **跨平台支持**:Electron-Packager可以将你的Electron应用打包成对应平台的原生应用格式,如Windows的.exe、macOS的.dmg或Linux的.deb/rpm。 2. **自定义配置**:你可以指定打包的输出目录、应用的名称、版本、...
本篇将深入探讨如何利用electron-builder将Electron案例转化为适用于Windows操作系统的程序和安装包。 首先,确保你已经安装了Node.js和npm(Node包管理器),因为Electron和electron-builder都是基于Node.js环境...
这个"electron打包window应用.exe文件demo"是关于如何利用Electron将项目转化为Windows平台可执行文件(.exe)的教程。下面我们将深入探讨这个过程,以及涉及到的关键知识点。 首先,你需要了解Electron的基本结构...
同时,开发者还需要安装Node.js和Electron的相关工具,如`electron-builder`或`electron-packager`,以便将Electron应用打包成exe文件供用户下载和运行。整个过程需要注意的是,由于Electron基于较新的技术,因此在...
然后,使用Electron的打包工具,如`electron-packager`或`electron-builder`,将这些资源转换为平台特定的可执行文件,例如Windows上的.exe。 **全屏显示** 在Electron中,可以使用`BrowserWindow`对象的`...
这个过程通常涉及到使用构建工具,如`electron-packager`或`electron-builder`,它们能够处理资源打包、依赖管理和生成目标平台的可执行文件。 6. **开发流程**:使用Electron开发桌面应用通常涉及以下几个步骤:...
- **设置项目环境**:安装Node.js,然后使用npm(Node Package Manager)安装Electron和相关打包工具,如electron-packager或electron-builder。 - **创建基本结构**:项目通常包含主进程脚本(如main.js)和渲染...
3. `electron-builder`或`electron-packager` - 打包工具,用于生成跨平台的应用安装程序。 总结 "electron-quick-start-master.zip"压缩包为我们提供了一个Electron应用的起步示例,通过学习和理解其中的...
7. **预编译和预捆绑**:使用 `electron-builder` 或 `electron-packager` 等工具,它们可以处理预编译步骤,如编译原生 Node.js 模块,将它们捆绑到最终的可执行文件中。 8. **利用缓存**:如果应用需要处理大量...
`electron-packager` 是一个用于打包 Electron 应用程序的工具,可以帮助我们将应用程序打包成不同平台下的可执行文件。 ```bash npm install -g electron-packager ``` #### 二、创建一个基本的应用 在这个阶段...
将Vue应用打包成EXE可执行文件,是利用Electron的能力,使Web应用能够在桌面环境中运行。"Vue打包exe项目electron-quick-start"就是这样一个教程,旨在帮助开发者将Vue项目转化为可在Windows系统上运行的EXE程序。 ...
7. 应用打包和分发:使用Electron-builder或electron-packager等工具,开发者可以将应用打包为各平台的可执行文件。 总的来说,Electron框架为开发跨平台桌面应用提供了便利,它结合了Web开发的易用性和桌面应用的...
打包过程通常包括编译、优化资源、处理依赖和生成可执行文件等步骤,这可以通过 electron-builder 或 electron-packager 等工具轻松实现。 总之,"electron-project.zip" 提供了一个基础的 Electron 应用模板,包含...
描述提到“利用electron打包生成的exe文件桌面应用”,意味着这个项目已经完成了打包过程,生成了可以在Windows系统上运行的.exe可执行文件。在 Electron 应用开发完成之后,通常会使用如`electron-builder`或`...
3. **打包与发布**:学习如何使用`electron-packager`或`electron-builder`将应用打包成可执行文件,并了解不同操作系统(Windows、macOS、Linux)的打包策略。 4. **应用生命周期管理**:涵盖创建窗口、响应应用...
5. **打包与发布**:Electron Builder或Electron Packager等工具用于将应用打包成可执行文件,便于在不同平台上分发。 6. **安全考虑**:由于Electron应用具有Node.js的执行权限,需要注意避免代码注入和恶意脚本...
6. **打包和部署**:了解如何将应用程序打包成可执行文件,如使用Electron Builder或electron-packager工具,以便在不同平台上分发。 7. **调试技巧**:学会使用Electron的开发者工具进行调试,以及如何在Python...
要创建安装程序和 Linux 包等可分发文件,请考虑使用 Electron Forge(内部使用 Electron Packager)或相关的 Electron 工具之一,该工具利用 Electron Packager 创建的文件夹作为基础。 请注意,打包的 Electron ...
6. **打包与分发**:完成开发后,应用需要被打包成适合各个操作系统的安装程序,这通常需要借助工具如`electron-builder`或`electron-packager`。分发可以通过各种渠道,如应用商店、官方网站或其他下载平台。 总的...
完成开发后,可以使用 `electron-packager` 或 `electron-builder` 工具将应用打包为可执行文件,适用于不同的操作系统。 ** 总结 ** Electron-pug 结合了 Electron 的跨平台桌面应用开发能力与 Pug 的高效模板...