1、检查是否安装了node
输入
node -v
和
npm -v
查看node和npm是否安装好，Windows下没有安装好的参考教程
《Windows下NodeJS安装与npm环境变量配置》
，如果是Linux项目参考教程
《linux安装nodejs》
。
安装完成后，可以把镜像换成淘宝的，之后下载一些东西速度会快一点，在命令行输入
npm install cnpm -g --registry=https://registry.npm.taobao.org
，全局安装cnpm。之后下载慢的话直接用
cnpm install
就可以了。
2、初始化项目&配置文件
以下教程以Windows为例，Linux和Mac基本类似。
本教程新建了一个HelloWorld的文件夹，在文件夹下面创建了一个index.html的网页文件。
在项目文件中打开cmd窗口，输入
npm init
，引导语都直接回车，先都默认，然后会在项目文件下面生成一个
package.json
文件。
打开package.json文件，将
name
修改为项目名，将
main
里面的值改为
main.js
，然后对
scripts
进行如下配置。
"scripts": {
"start": "electron .",
"package-win": "electron-packager . HelloWorld --platform=win32 --electron-version=10.0.0 --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico",
"package-linux": "electron-packager . HelloWorld --platform=linux --electron-version=10.0.0 -no-sandbox --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.png",
"package-mac": "electron-packager . HelloWorld --platform=darwin --electron-version=10.0.0 --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico"
},
对
scripts
设置了四个参数，一个是不打包直接启动的
start
，其他三个参数是三个不同平台项目的打包。在运行命令的时候，如果是直接启动，就运行
npm start
，如果是打包，就运行
npm run package-win
自己选择对应的平台。
第一行第二个参数
HelloWorld
表示打包后文应用程序的名称
paltform
参数可以设置为
win32
，代表打包为Windows 系统的可执行文件，打包为.exe；设置为
linux
，代表打包为Linux系统的文件，但在Linux系统下面无法直接运行，需要进行后期的配置。设置为
darwin
，打包为Mac下面的应用程序。
out
参数为输出文件夹的名字，
icon
参数读取文件项目的logo图标，在项目中图标放在
assets/img
文件夹下面。然后在参数里面把镜像换成了淘宝镜像，这样打包速度会快很多，不然会等到猴年马月。
3、新建main.js
配置好上面的文件后，在项目的根目录下面新建一个
main.js
文件,需要写入的内容如下：
const {
app,
Menu,
BrowserWindow
} = require('electron')
function createWindow() {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 750,
height: 650,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('index.html')
Menu.setApplicationMenu(null) //取消菜单栏
// 打开开发者工具
// win.webContents.openDevTools()
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
4、安装electron插件
把上面所有的都配置好之后，现在就可以开始安装相应的插件了。在项目根目录中打开cmd窗口，只在项目中安装
electron
，输入命令
npm install --save-dev electron
。
上面这个插件是可以将网页用于应用程序窗口打开的，打包的话还需要另外一个插件
electron-packager
，还是在当前命令窗口下，输入
npm install --save-dev electron-packager
。
5、打包运行
在打包之前可以先测试运行是否代码有错，在当前命令行输入
npm start
，
然后就会弹出一个窗口，这就是打包后你需要的应用程序界面。
如果出现了想要的界面，就一切OK了，但万一发现没有达到想要的效果，估计是报错了，那么怎么打开控制台呢。在上面的main.js文件里面，我把打开开发者工具那行代码给注释了，取消掉就可以看见控制台了，知道自己那些报错了。
然后就开始打包吧。在命令行窗口运行
npm run package-win
，等一下就可以在当前目录下面看见一个新的文件夹，就去找到exe文件就可以双击运行了。
如果要在Linux下面运行，在命令行窗口运行
npm run package-linux
，生成的文件和Windows下略有不同，但可执行文件名字都是一样的，都叫做
HelloWorld
，找到整个文件，在当前目录打开终端，如是普通用户的话就先给权限
chmod +x ./HelloWorld
，然后再运行
./HelloWorld
。如果弹出窗口，证明你成功了，但我在搞整个玩意的过程中，试了半天没成功，控制台都是报这样的错误
[5301:1201/103632.560608:FATAL:electron_main_delegate.cc(264)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.追踪与中断点陷阱 (核心已转储)
后来找到一篇博客，说是在后面加上
--no-sandbox
就可以，然后我就试了
./HelloWorld --no-sandbox
，果不其然，成功。
Mac下面的话小弟没测，因为qiu，各位大佬自行检测，有什么问题可以评论交流讨论。
6、其他的一些问题
上面的教程就实现了所有的打包，这个点是解决一些我在打包过程中遇到的一些问题。
第一个是打包过程中，如果引用了其他的一些js库或者文件，就比如引用jQuery的话，会在控制台报$不是一个功能，这是因为在打包的过程中路径出现了问题。只需要在入口html文件最开始的地方加上
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
这行代码就可以解决这个问题。
7、编译/反编译app.asar
打包后，electron将数据文件变成了asar格式的压缩文件，需要用node进行反编译，才可以得到所有的数据文件。在打包好的目录下面找到resources这个文件夹，打开就可以发现app.asar这个文件。
在resources目录下面打开cmd窗口，运行命令
npm install -g asar
，会在node全局安装使用。
然后执行命令
asar extract app.asar ./app
，就会把app.asar反编译到当前目录下面的app文件夹下面，然后打开app文件夹，找到data文件夹，下面就是后端返回的两个数据，head_data.js和ssh_data.js，如果后端需要替换数据，请按照相同的格式进行替换。
假如替换好数据后，就需要对app这个文件夹重新编译为app.asar，还是在resources文件夹下面运行cmd窗口，然后运行命令
asar pack app app.asar
就可以把之前的app.asar文件给替换，达到更换数据的效果。
**注意：**如果后端需要对数据文件进行更改，不需要每次都进行反编译，手动反编译一次，然后让后端替换data数据，执行编译这一步操作即可。