Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。这里简单介绍如何将web项目封装成安装包
一、安装
|
1 2 |
npm install electron -g npm install electron-packager -g |
二、修改源
|
1 |
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/ |
三、修改环境变量
ELECTRON_MIRROR：http://npm.taobao.org/mirrors/electron/
四、改造现有项目
1.首先下载示例项目：
|
1 |
git clone https://github.com/electron/electron-quick-start |
2.将electron-quick-start中的main.js preload.js renderer.js复制到你的项目。
3.修改你项目中的package.json文件
添加：
|
1 |
"main": "main.js", |
script中添加两个命令：
|
1 2 |
"ele": "electron .",//以electron环境运行 "pack": "electron-packager . Minakevin-teacher --platform=win32 --arch=ia32 --out=./dist --asar --app-version=0.0.1 --icon=favicon.ico --overwrite"// 打包成exe |
参数说明：
–platform:操作系统
–arch:64位还是32位
–icon:图标路径，必须是ico文件
–out:输出文件路径
–overwrite 如果输出文件已存在直接覆盖
更多设置请参考:
|
1 2 3 4 5 6 7 8 |
"scripts": { os系统:"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)\"", os系统:"packageDarwin": "electron-packager . 'Hosts' --platform=darwin --arch=x64 --icon=hosts.icns --out=./dist --asar --app-version=2.0.1", windows系统:"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)\"", windows系统:"packageWin": "electron-packager . 'Hosts' --platform=win32 --arch=x64 --icon=hosts.ico --out=./dist --asar --app-version=2.0.1", linux系统:"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)\"" linux系统:"packageLinux": "electron-packager . 'Hosts' --platform=linux --arch=x64 --out=./dist --asar --app-version=2.0.1" } |
4.修改main.js
添加以下代码:
这里有两种方式，加载本地文件或者web页面，更多代码可以参考官方文档。
|
1 |
mainWindow.loadFile('yourPath/index.html') |
|
1 |
mainWindow.loadURL('https://yourWebSite'); |
5.运行项目：
|
1 |
npm run ele |
6.打包项目
|
1 |
npm run pack |
打包完成后会在–out目录中多出一个文件夹，里面包含一个.exe文件和其它文件夹，双击exe文件就可以运行了
五、发布exe文件：
打包完成后是一个文件夹，不方便使用，可以将其封装成安装包。需要用到两个软件：NSIS 和 HM NIS Edit
首先使用HM NIS Edit，以向导模式创建一个脚本，这里选择addDirTree，添加打包后的文件夹，最后保存生成后的nsi文件
编辑生成的nsi文件，这里的目的是使用中文版的安装界面
|
1 2 |
; Language files !insertmacro MUI_LANGUAGE "Englist" |
修改为：
|
1 2 |
; Language files !insertmacro MUI_LANGUAGE "SimpChinese" |
保存后选择编译并运行，或者用NSIS打开保存的nsi文件来生成exe安装包。
文章评论 暂无评论
暂无评论