Electron打包桌面应用程序
是一个使用 、HTML 和 CSS 构建桌面应用程序的框架。
项目地址：
博客地址：
一、初始化项目
1、npm init指令初始化项目配置：
entry point选项的值应为main.js
和也必须填写，但是可以填写任意值
.json
{"name": "electron-app","version": "1.0.0","description": "a electron app demo","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "xxx@gmail.com","license": "ISC"
}
2、安装依赖：
npm install --save-dev electron electron-builder
3、修改.json，在里添加start指令：
"start": "electron ."
4、执行npm start启动项目，会发现如下图报错：
这是因为现在还没有mian.js文件，线程找不到主进程。
二、创建视图文件和入口文件
1、新建index.html视图文件。
DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Electron Apptitle>head><body><h1>Electron Apph1><p>这是我的第一个桌面应用程序p>body>
html>
2、再创建.js预加载脚本文件：
// preload.js
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])}
})3、接下来创建main.js入口文件，内容如下：
// main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('index.html')
}// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 当所有窗口都被关闭的时候退出程序
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})现在我们再来执行npm start启动项目，就会弹出一个如下图的窗口：
至此，说明我们的代码没有问题。
三、打包项目
1、修改.json文件，在里添加如下内容：
注：json文件不能有注释，请自己把后面的注释去除
"pack": "electron-builder --dir",// 暂时不知道用途，官方的配置
"postinstall": "electron-builder install-app-deps",// 编译命令
"build": "electron-builder",// 打包当前平台命令
"build-win": "electron-builder --win --ia32",// 打包windows 32位应用命令
"build-win64": "electron-builder --win --x64",// 打包windows 64位应用命令
"build-mac": "electron-builder --mac",//打包mac平台应用命令
"build-linux": "electron-builder --linux"// 打包Linux平台应用命令
完整的内容应为下图：
2、执行npm run 编译项目：
3、再执行npm run build打包（这里以当前平台为例）。
没有报错，说明我们打包成功。然后就发现多了一个dist文件夹，打开进去就是我们安装包的位置：
免安装目录：不用安装，进去后直接双击里面的.exe文件就可以直接打开；
安装包：需要安装，直接双击就能正常安装。
到这里，我们就可以自己打包一个桌面应用程序了。
四、打包报错处理
1、要是我们运行npm run build打包时出现、nsis、nsis-文件下载不了的错误，这时我们就需要手动下载。
复制后面的下载地址到文件加速网站（）下载相应的文件，把下载好的文件解压放到下列对应的文件夹中：
用户名为自己电脑的用户名（例如：C:\Users\Hello\\Local\-\Cache）；
版本号为npm run build时下载地址中的版本号；
要是这个目录下没有\-\Cache\这个地址，则需要自己创建;
上面这图是成功打包的图，实际操作需要一步一步buid再下载文件。
：C:\Users\用户名\\Local\-\Cache\\-版本号
nsis：C:\Users\用户名\\Local\-\Cache\nsis\nsis-版本号
nsis-：C:\Users\用户名\\Local\-\Cache\nsis\nsis--版本号
当所有包都下载好后重新npm run build就可以了。
至此完结。
参考文档：
中文网
打包（平台）
