一、基础打包过程
1、整理思路
相信有很多公司，用习惯老式的ERP系统，将软件UI固化为WINDOWS桌面端的应用程序。
你将一个Element项目摆在他的面前，他看不惯！
他想让你的Web项目封装为一个客户端！
是的，你没听错！我们的目的，就是将Web项目封装成一个客户端！
2、如何实现呢？
我难道重新开发一个OA客户端吗？
我难道废寝忘食一个月，专研学习C++吗？
我的思路肯定是写一个容器，内嵌H5网页！聪明的你明白了吗？
据说钉钉就是这么做的！
首先，你需要有一个正式上线的项目，能在外网或内网被访问，我这以我的CSDN主页为例！其次，写一个空白的H5界面，加一个跳转到你项目网址的JS。最后，将这个H5文件，通过 nodewebkit 封装为一个客户端！Vue项目，打包后其实也是H5文件，可以一概而论！
3、下载 nodewebkit
进入https://nwjs.io/ ，下载后得到 nwjs-v0.54.0-win-x64.zip 文件，解压到指定的文件夹
当然它是开源的，你可以到Github中下载它的源码：
https://github.com/nwjs/nw.js
3.1：下载
3.2解压
4、新建一个 package.json 文件
5、新建一个index.html 文件
6、打包zip压缩文件后，将后缀名改为nw
改完后缀名后如下图所示：
7、打包文件
将2.nw复制到 第一步的文件夹内，使用cmd打开第一步的目录
执行命令：
该行命令的意思，就是将两个EXE文件合并为一个EXE文件
命令执行后，当前目录下生成 app.exe 文件
8、发布客户端
如果直接将 app.exe 复制到其他目录，是无法运行的。
因为 app.exe 有很多需要的依赖文件，比如目录下的各类dll文件。
要将此客户端正式使用，需要将整个目录一起打包带走，作为客户端的安装目录。
原文CSDN链接：
https://zwz99.blog.csdn.net/article/details/118110654
二、Vue项目的打包
2.0 思路解析
聪明的读者已经发现，
我都已经把CSDN主页都封装为客户端了，Vue项目还不是了如指掌？
将Vue项目封装为客户端的问题，可以拆解为以下两步：
1.将Vue项目部署到Nginx上，放在服务器，生成一个网址
2.将网址套用在之前H5文件的跳转路径中，完成！
第二步，在之前已经详细说明，所以，我们来尝试如何将Vue发布到服务器上！
2.1 Nginx是什么
Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。
就像Tomcat完美支持运行Java项目一样，Nginx可以完美支持Vue项目，他们就是一对CP！
其中，conf文件夹下有一个关键的配置文件 —— nginx.conf。
这个文件里可以配置Vue项目的运行端口、SSL证书、反向代理、负载均衡等等。
具体代码会在最后给出！
html文件夹下，就是放Vue打包后的dist内的文件，完美兼容！
log文件夹下方一些运行的日志，如果发现跑不起来，可以看看错在哪PS：所谓正向代理，就是代理服务器代替你访问服务器，如国外网址，运用代理服务器，可以大大加快访问速度，可以理解为像VPN这样的东西，你知道你访问的是什么，但国外网站只知道代理服务器在访问他，不知道真正访问的人。
所谓反向代理，就是代理服务器代替服务器访问你，你不需要只要请求代理服务器，他会根据你的请求，帮你转发到相应的服务器。目标服务器知道是你在访问，但你不知道你到底访问了哪台服务器！
2.2 Vue项目部署
将Vue打包文件放到html文件夹下后，就可以启动Nginx了！
cmd进入Nginx的目录，运行命令即可！
2.3 上线验证
如果部署的是云服务器，需要注意是否开启端口外网访问，如阿里云默认除8080端口外禁止外网访问，腾讯云则无此限制。
如被限制，需要登入相应的控制台设置。
打开浏览器，确保项目可以被访问，最后将该网址套用在之前的H5文件内，即可完成客户端封装！
三、附录
package.json完整代码
{
/**指定程序的起始页面。*/
"main": "index.html",
/**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
"name": "OA",
/**程序描述*/
"description": "OA办公系统",
/**程序版本号*/
"version": "1.0.0",
/**关键字*/
"keywords": ["demo","node-webkit"],
/**bool值，如果设置为false，将禁用webkit的node支持。*/
"nodejs": true,
/**
* 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
* 它在node上下文中运行，可以用它来实现类似后台线程的功能。
* （不需要可注释不用）
*/
//"node-main": "js/node.js",
/**
* bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
* 如果你希望允许同时启动多个实例，将该值设置为false。
*/
"single-instance": true,
/**窗口属性设置 */
"window": {
/**字符串，设置默认title。*/
"title": "OA",
/**窗口的icon。*/
"icon": "img/tubiao.ico.png",
/**bool值。是否显示导航栏。*/
"toolbar": false,
/**bool值。是否允许调整窗口大小。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任务栏显示图标*/
"show_in_taskbar": false,
/**bool值。如果设置为false，程序将无边框显示。*/
"frame": true,
/**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的宽度。*/
"width": 1920,
/**主窗口的的高度。*/
"height": 1080,
/**窗口的最小宽度。*/
"min_width": 400,
/**窗口的最小高度。*/
"min_height": 335,
/**窗口显示的最大宽度，可不设。
"max_width": 800,*/
/**窗口显示的最大高度，可不设。
"max_height": 670,*/
/**bool值，如果设置为false，启动时窗口不可见。*/
"show": true,
/**是否在任务栏显示图标。*/
"show_in_taskbar":true,
/**
* bool值。是否使用kiosk模式。如果使用kiosk模式，
* 应用程序将全屏显示，并且阻止用户离开应用。
* */
"kiosk": false
},
/**webkit设置*/
"webkit": {
/**bool值，是否加载插件，如flash，默认值为false。*/
"plugin": true,
/**bool值，是否加载Java applets，默认为false。*/
"java": false,
/**bool值，是否启用页面缓存，默认为false。*/
"page-cache": false
}
}
Nginx conf配置文件模板代码
#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍
worker_processes 16;
events {
#每一个worker进程能并发处理（发起）的最大连接数
worker_connections 65535;
}
http {
#开启高效文件传输模式
sendfile on;
#长连接超时时间，单位是秒
keepalive_timeout 65;
#用于指定响应客户端的超时时间
send_timeout 30;
#允许客户端请求的最大单文件字节数。
client_max_body_size 100m;
#缓冲区代理缓冲用户端请求的最大字节数
client_body_buffer_size 128k;
#导入外部配置文件 文件扩展名与文件类型映射表
include mime.types;
#让浏览器认为响应是普通的文件流，并提示用户下载文件 如 图片 pdf等
default_type application/octet-stream;
charset utf-8;
tcp_nopush on;
gzip on;
#压缩最小文件阀值
gzip_min_length 1k;
#缓冲区大小
gzip_buffers 4 16k;
#http协议版本
gzip_http_version 1.0;
#IE版本1-6不支持gzip压缩，关闭
gzip_disable 'MSIE[1-6].';
#压缩级别
gzip_comp_level 6;
#需要压缩的文件格式
gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
#告知客户端能否缓存
gzip_vary on;
#反向代理时使用
gzip_proxied off;
#负载均衡
upstream zwz {
server 127.0.0.1:13145 weight=1;
}
server {
listen 8080 ssl;
server_name localhost;
# server_name xxxxxx.com;
client_max_body_size 100m;
# 设置解决大json返回不完整问题
proxy_buffers 16 1024k;
proxy_buffer_size 1024k;
#保留代理之前的真实客户端ip
proxy_set_header X-Real-IP $remote_addr;
#在多级代理的情况下，记录每次代理之前的客户端真实ip
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
ssl on;
ssl_certificate ssl/4798969_xxxxxx.com.pem;
ssl_certificate_key ssl/4798969_xxxxxx.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
charset utf-8;
location / {
root html;
index index.html index.htm;
add_header 'Access-Control-Allow-Origin' '*';
}
location /xboot {
#反向代理
proxy_pass http://zwz;
}
error_page 404 /404.html;
}
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165项目完整源码获取方式：关注小编+转发文章+私信【 666 】免费获取！！！
HTML
- 《Head First HTML与CSS》
Head Fisrt系列书你懂的，为入门而生，文笔风趣幽默为主，配图也很丰富，简单易懂就对了。
- 《HTML5 权威指南》
豆瓣评分8.5的书，书是没问题，800多页的书全面性不用说，但是能不能读得完这是一个问题，就看决心和“手速”了。
CSS
- 《CSS权威指南》
放在现在来看是本“老书”了，但是很多基础的东西在那摆着也得学。CSS东西就是细节多，这本就当是给CSS的知识点做了一个大梳理吧，所以这本书当工具书看是可以。
- 《CSS揭秘》
这本书展示了47个CSS的技巧，是一本注重实践的教程，虽然算进阶书，但是内容没那么难，看完对很多实现思路有启发。
JavaScript语言
- 《你不知道的 JavaScript》
这本书是翻译过来的，分好几卷，黄油油的封面你懂的~ 应该说这本书把JavaScript里很多复杂且深度的概念进行了细致讲解，比如作用域、闭包、原型、异步等等，网上书评啥的还是可以的。
- 《JavaScript DOM编程艺术》
这本书并不厚，小白可用，初学时搞定并实践了这本书里的内容，应该入门没啥问题，这样后面就可以找一些经典甚至圣经类的书来加强和巩固了。
- 《JavaScript 高级程序设计》
大名鼎鼎的JS红宝书，是权威的JavaScript入门书籍，没错是入门书籍！不要被名字里的“高级”两个字吓跑~ 内容循序渐进，基础且全面，不能指望一遍就过，适合精读也适合回味。
- 《JavaScript权威指南》
上面是“红宝书”，这本是“犀牛书”，据说这两本在一起更搭配哦。
这本书是淘宝前端团队翻译的，也算是JavaScript开发者的圣经之一，内容太多太全，如果能多通读几遍并有所心得，估计成神之路也就不远了~
ES
ES和JS的关系应该能分得清吧，对前端开发来说，ES6+还是有必要学一下的，经典的材料有几个。
- 《阮一峰ECMAScript 6入门教程》
- 《深入理解ES6》
豆瓣评分9.4的书，比较系统地介绍了ES的重要特性。
TypeScript
作为一名合格的前端工程师，TypeScript现在也是必须掌握的知识了，学习它最好的材料还是文档。
- 《英文文档》
- 《中文文档》
- 《深入理解TypeScript》
看文档还是最好的，至于书的话，这本《深入理解TypeScript》是原版《TypeScript Deep Dive》的翻译本，有精力可以康康。
数据结构和算法
- 《学习JavaScript数据结构与算法（第3版）》
数据结构和算法本身其实和编程语言无关，但是如果非得让找一本基于JavaScript语言描述的数据结构和算法书，那这本是前端的菜就对了。除了常用数据结构、算法、以及算法思想均有涉及之外，书中专门还用一章来写了ES和TS的东西。
设计模式
- 《JavaScript设计模式》
设计模式这东西本来也是和语言无关的，这是一本基于JavaScript语言描述的设计模式落地实现，所有常见的设计模式都讲到了，行文风格也不枯燥，给出的场景和实例也挺全，当然这本重在灵活运用，进阶可阅。
网络协议
对于前端开发来说，网络协议肯定是必看，尤其应用层协议，其他底层协议能多了解一点当然更好。
- 《图解TCP/IP》
- 《图解HTTP》
这两本网络协议图解书籍通俗易懂，配图也很形象，黑皮（灰皮）版网络协议圣经啃不下来的，可以看看这个。
- 《HTTP权威指南》
这本书并不只有HTTP协议本身的内容，也并不仅仅针对前端开发者。它里面将很多周边技术和Web化过程中诸多的技术和原理都进行了阐述，内容系统庞大。跟Web开发有关的程序员在进阶扩大知识面时都可以看看。
Node.js
- 《Node.js中文文档》
http://nodejs.cn/api/
Node.js版本更新这么快，看文档是最靠谱的。
- 《Node.js实战》
如果硬要找一本教材看，这本Node.js的实战教程可以一用。
- 《深入浅出Node.js》
这本书不是写给初学者看的，算是Node.js进阶书籍，国人作者真的是长脸，对Node.js的一些关键原理做了剖析，如果想深入了解 Node，这本书值得一看。
应用框架
框架这东西更新迭代实在太快了，要么还没来得及出书，要么就是那种迅速推出的快餐书，基本都是照搬框架的官方文档，有时候翻译和理解得还不一定准确，所以在学习前端的形形色色的框架时，官方文档还是最靠谱和全面的资料，包括但不限于：
关注性能
- 《Web性能权威指南》
看这本书之前像TCP/IP协议族的基础最好具备，虽然书中很多篇幅也在讲述这部分内容，但是加入了对应优化实践的知识和内容，进阶阅读可用。而且这本书也不仅仅是前端开发人员可以看，所有Web应用及站点开发人员都可以阅读，包括后端、运维、存储、视频、性能工程师等等。
后 记
最后小伙伴们如果有什么要补充，或者可以推荐的不错资料，欢迎多多补充，一起分享提高。