将 html 项目打包成可执行 exe 文件

项目需求：做一个基于web页面的浏览器指纹管理系统，类似于ads，于是有了这篇文章。

---

环境需求：nwjs，EnigmaVirtualBox，和一个 web 页面

---

前言

用 nwjs 打包web文件的一个小案例，仅供学习参考，大佬勿喷。

---

以下是本篇文章正文内容，下面案例可供参考

一、nwjs

nwjs 是一款跨平台轻量级桌面应用开发软件，可以把一个堆 html 文件打包成一个 exe 可执行文件。更多信息自行百度吧。

二、nwjs 使用步骤

1.下载 nwjs

nwjs 可以在官网上下载，也可以从我的网盘下。

链接：https://pan.baidu.com/s/1pnNw5RzGQBBP5qby0eK54A
提取码：zn3y

2.使用

（1）目录结构

这里我用的是 nwjs-sdk-v0.49.0-win-x64 这个 sdk 版本，目录结构如下：

（2）使用步骤及注意事项

把 SDK 下载下来后，接下来就是打包 html 文件。在打包 web 文件前，需要在入口文件的同级目录添加一个 package.json 文件，内容如下：

这其中，main 参数填的是软件的主入口文件，也就是可执行文件打开后会进入 main 参数里填的这个 html 界面。

其他参数图中也有描述，更多参数自行去官网查看官方文档。然后开始打包 web 文件。我的 html 源文件结构如下：
这里我遇到两个坑，详细描述如下：

1）压缩文件

打包过程需要把 web 源文件打包成压缩文件，然后改成 .nw 后缀。刚开始的时候我是把 loginHTML 文件夹压缩，发现根本不能运行。找了一些资料，终于在 B 站的一个视频 中找到正确教程。下面分析原因：
我第一次压缩的时候，是 loginHTML 文件夹压缩的，正如视频所说，点击压缩包预览其结构是这样的：

---

loginHTML
······css
······image
······js
······layui
···login.html
···package.json

---

这样子压缩进去的第一层目录是 loginHTML ，而制作可执行文件需要第一层目录就能读到 package.json 文件，所以正确的目录结构应该是这样：

---

···css
···image
···js
···layui
login.html
package.json

---

如此我们只需要进入源文件目录，Ctrl+A 全选之后压缩就行。

2）压缩方式

第二个坑就是压缩方式，按照上述的压缩方法压缩后，我发现还是不行。看了一些资料，发现有个网友提到压缩方式。而我之前用的是 7z 的压缩方式，于是赶紧换成 zip 的压缩方式，然后就一次点亮了，干得漂亮 （rinidaye）。

（3）执行命令 copy /b nw.exe+ooo.nw xxx.exe

改完后缀把文件放到 SDK 的文件夹里，然后用命令行执行 copy /b nw.exe+ooo.nw xxx.exe，ooo 是你的压缩文件名，xxx 是你要生成的 exe 文件名，成功的话会在 SDK 文件夹生成一个可执行文件，运行该文件即可。

（4）小技巧

每次都打开命令行运行太麻烦，写一个批处理，内容就是 copy /b nw.exe+app.nw app.exe，每次要打包什么文件的时候把所要打包的 .nw 文件名换成 app 即可，生成出来的 app.exe 就是想要的可执行文件，也可改名。

三、EnigmaVirtualBox 打包环境依赖

上述打包好的可执行文件是需要依赖的，如果换一个环境那就不能执行了，所以需要把环境依赖也打包成 exe 文件，我这里用的是 EnigmaVirtualBox 。软件自己去网上找吧，百度出来一大堆。软件打开后长这样：

添加完参数，点击打包即可。

总结

所有步骤如下：

1. 下载 SDK
2. 压缩 html 源文件，记得从内层目录全选并且用 zip 压缩
3. 执行 copy /b nw.exe+ooo.nw xxx.exe 命令
4. 用 EnigmaVirtualBox 打包可执行文件以及文件依赖