[TOC] ## 安装 electron `npm i -D electron@latest` ## 克隆示例项目的仓库 `$ git clone https://github.com/electron/electron-quick-start` ## 进入这个仓库 `$ cd electron-quick-start` ## 安装依赖并运行 `$ npm install && npm start` ## phpstrom/webstrom 识别 electron ` 语言 & 框架 > javascript > Libraries> 添加>附加目录> 选择 **/node_modules\electron` ## 打包 ### 方案一 electron-builder - 推荐 `npm install electron-builder -D` package.json 添加 ``` "scripts": { "dist": "electron-builder --win --x64" }, "build": { "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名 "appId": "com.leon.xxxxx",//包名 "copyright":"xxxx",//版权 信息 "directories": { // 输出文件夹 "output": "build" }, "nsis": { "oneClick": false, // 是否一键安装 "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。 "allowToChangeInstallationDirectory": true, // 允许修改安装目录 "installerIcon": "./build/icons/aaa.ico",// 安装图标 "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标 "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标 "createDesktopShortcut": true, // 创建桌面图标 "createStartMenuShortcut": true,// 创建开始菜单图标 "shortcutName": "xxxx", // 图标名称 "include": "build/script/installer.nsh", // 包含的自定义nsis脚本 }, "publish": [ { "provider": "generic", // 服务器提供商 也可以是GitHub等等 "url": "http://xxxxx/" // 服务器地址 } ], "files": [ "dist/electron/**/*" ], "dmg": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/aims.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] }, "linux": { "icon": "build/icons" } } ``` ### 方案二: electron-packager ``` npm install -g electron-packager sudo npm install asar -g electron-packager . --asar ``` > asar 用于加密原码