将Web项目封装为PC客户端，其中一种方式就是运用 node-webkit 。

node-webkit 是一个基于node.js和 chromium的应用程序运行环境，通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用，也就是我们所说的客户端，而且还支持跨平台。

一、基础打包过程

0.整理思路

相信有很多公司，用习惯老式的ERP系统，将软件UI固化为WINDOWS桌面端的应用程序。

你将一个Element项目摆在他的面前，他看不惯！

他想让你的Web项目封装为一个客户端！

是的，你没听错！我们的目的，就是将Web项目封装成一个客户端！

如何实现呢？

我难道重新开发一个OA客户端吗？

我难道废寝忘食一个月，专研学习C++吗？

我的思路肯定是写一个容器，内嵌H5网页！聪明的你明白了吗？

据说钉钉就是这么做的！

首先，你需要有一个正式上线的项目，能在外网或内网被访问，我这以我的CSDN主页为例！

其次，写一个空白的H5界面，加一个跳转到你项目网址的JS。

最后，将这个H5文件，通过 nodewebkit 封装为一个客户端！

Vue项目，打包后其实也是H5文件，可以一概而论！

1. 下载 nodewebkit

进入https://nwjs.io/ ，下载后得到 nwjs-v0.54.0-win-x64.zip 文件，解压到指定的文件夹

当然它是开源的，你可以到Github中下载它的源码：https://github.com/nwjs/nw.js

1.1：下载

nodewebkit 官网

1.2解压

2.新建一个 package.json 文件

1. {
2.  /**指定程序的起始页面。*/
3.  "main": "index.html",
4.  /**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
5.  "name": "OA系统",
6. }

3.新建一个index.html 文件

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <script language="javascript" type="text/javascript">
7. // 以下方式直接跳转
8. window.location.href='https://blog.csdn.net/qq_41464123';
9. </script>
10. </body>
11. </html>

4. 打包zip压缩文件后，将后缀名改为nw

改完后缀名后如下图所示：

5.打包文件

将2.nw复制到第一步的文件夹内，使用cmd打开第一步的目录

执行命令：

copy /b nw.exe+2.nw app.exe

该行命令的意思，就是将两个EXE文件合并为一个EXE文件

命令执行后，当前目录下生成 app.exe 文件

双击打开后的效果：

6.发布客户端

如果直接将 app.exe 复制到其他目录，是无法运行的。

因为 app.exe 有很多需要的依赖文件，比如目录下的各类dll文件。

要将此客户端正式使用，需要将整个目录一起打包带走，作为客户端的安装目录。

如果需要打包为单EXE文件，可以使用 Enigma Virtual Box软件实现，多文件目前为止杀毒软件不报毒，打包为单文件之后，杀毒软件会报毒，所以笔者未进行单文件优化，欢迎补充！

原文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！

我们可以到 http://nginx.org/en/download.html 下载Nginx的最新版本，下载后解压。

其中，conf文件夹下有一个关键的配置文件 —— nginx.conf。

这个文件里可以配置Vue项目的运行端口、SSL证书、反向代理、负载均衡等等。

具体代码会在最后给出！

html文件夹下，就是放Vue打包后的dist内的文件，完美兼容！

log文件夹下方一些运行的日志，如果发现跑不起来，可以看看错在哪

PS：所谓正向代理，就是代理服务器代替你访问服务器，如国外网址，运用代理服务器，可以大大加快访问速度，可以理解为像VPN这样的东西，你知道你访问的是什么，但国外网站只知道代理服务器在访问他，不知道真正访问的人。

所谓反向代理，就是代理服务器代替服务器访问你，你不需要只要请求代理服务器，他会根据你的请求，帮你转发到相应的服务器。目标服务器知道是你在访问，但你不知道你到底访问了哪台服务器！

2.2 Vue项目部署

将Vue打包文件放到html文件夹下后，就可以启动Nginx了！

cmd进入Nginx的目录，运行命令即可！

1. 验证配置是否正确: nginx  -t
2. 启动Nginx：start  nginx
3. 强制停止Nginx：nginx -s stop
4. 正常停止Nginx：nginx -s quit
5. 修改重Nginx：nginx -s reload

2.3 上线验证

如果部署的是云服务器，需要注意是否开启端口外网访问，如阿里云默认除8080端口外禁止外网访问，腾讯云则无此限制。

如被限制，需要登入相应的控制台设置。

打开浏览器，确保项目可以被访问，最后将该网址套用在之前的H5文件内，即可完成客户端封装！

三、附录

package.json完整代码

1. {
2.  /**指定程序的起始页面。*/
3.  "main": "index.html",
4.  /**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
5.  "name": "OA",
6.  /**程序描述*/
7.  "description": "OA办公系统",
8.  /**程序版本号*/
9.  "version": "1.0.0",
10.   /**关键字*/
11.   "keywords": ["demo","node-webkit"],
12.   /**bool值，如果设置为false，将禁用webkit的node支持。*/
13.   "nodejs": true,
14.   /**
15.   * 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
16.   * 它在node上下文中运行，可以用它来实现类似后台线程的功能。
17.   * （不需要可注释不用）
18.   */
19.   //"node-main": "js/node.js",
20.   /**
21.   * bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
22.   * 如果你希望允许同时启动多个实例，将该值设置为false。
23.   */
24.   "single-instance": true,
25.   /**窗口属性设置 */
26.   "window": {
27.     /**字符串，设置默认title。*/
28.     "title": "OA",
29.     /**窗口的icon。*/
30.     "icon": "img/tubiao.ico.png",
31.     /**bool值。是否显示导航栏。*/
32.     "toolbar": false,
33.     /**bool值。是否允许调整窗口大小。*/
34.     "resizable": true,
35.     /**是否全屏*/
36.     "fullscreen": false,
37.     /**是否在win任务栏显示图标*/
38.     "show_in_taskbar": false,
39.     /**bool值。如果设置为false，程序将无边框显示。*/
40.     "frame": true,
41.     /**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
42.     "position": "center",
43.     /**主窗口的的宽度。*/
44.     "width": 1920,
45.     /**主窗口的的高度。*/
46.     "height": 1080,
47.     /**窗口的最小宽度。*/
48.     "min_width": 400,
49.     /**窗口的最小高度。*/
50.     "min_height": 335,
51.     /**窗口显示的最大宽度，可不设。
52.     "max_width": 800,*/
53.     /**窗口显示的最大高度，可不设。
54.     "max_height": 670,*/
55.     /**bool值，如果设置为false，启动时窗口不可见。*/
56.     "show": true,
57.     /**是否在任务栏显示图标。*/
58.     "show_in_taskbar":true,
59.     /**
60.      * bool值。是否使用kiosk模式。如果使用kiosk模式，
61.      * 应用程序将全屏显示，并且阻止用户离开应用。
62.      * */
63.     "kiosk": false
64.   },
65.   /**webkit设置*/
66.   "webkit": {
67.     /**bool值，是否加载插件，如flash，默认值为false。*/
68.     "plugin": true,
69.     /**bool值，是否加载Java applets，默认为false。*/
70.     "java": false,
71.     /**bool值，是否启用页面缓存，默认为false。*/
72.     "page-cache": false
73.   }
74. }

Nginx conf配置文件模板代码

1. 
2. #worker角色的工作进程的个数 设置为CPU逻辑数量的两倍
3. worker_processes  16;
4. 
5. events {
6.     #每一个worker进程能并发处理（发起）的最大连接数
7.     worker_connections  65535;
8. }
9. 
10. 
11. http {
12.     #开启高效文件传输模式
13.     sendfile        on;
14.     #长连接超时时间，单位是秒
15.     keepalive_timeout  65;
16.     #用于指定响应客户端的超时时间
17.     send_timeout  30;
18.     #允许客户端请求的最大单文件字节数。
19.     client_max_body_size 100m;
20.     #缓冲区代理缓冲用户端请求的最大字节数
21.     client_body_buffer_size 128k;
22.     #导入外部配置文件 文件扩展名与文件类型映射表
23.     include       mime.types;
24.     #让浏览器认为响应是普通的文件流，并提示用户下载文件 如 图片 pdf等
25.     default_type  application/octet-stream;
26.     charset   utf-8;
27.     tcp_nopush     on;
28. 
29.     gzip on;
30.     #压缩最小文件阀值
31.     gzip_min_length 1k;
32.     #缓冲区大小
33.     gzip_buffers 4 16k;
34.     #http协议版本
35.     gzip_http_version 1.0;
36.     #IE版本1-6不支持gzip压缩，关闭
37.     gzip_disable 'MSIE[1-6].';
38.     #压缩级别
39.     gzip_comp_level 6;
40.     #需要压缩的文件格式
41.     gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
42.     #告知客户端能否缓存
43.     gzip_vary on;
44.     #反向代理时使用
45.     gzip_proxied off;
46. 
47.     #负载均衡
48.     upstream zwz {
49.         server 127.0.0.1:13145 weight=1;
50.     }
51. 
52.     server {
53.         listen       8080 ssl;
54.         server_name  localhost;
55.         # server_name  xxxxxx.com;
56.         client_max_body_size 100m;
57.         # 设置解决大json返回不完整问题
58.         proxy_buffers 16 1024k;
59.         proxy_buffer_size 1024k;
60.         #保留代理之前的真实客户端ip
61.         proxy_set_header X-Real-IP $remote_addr; 
62.         #在多级代理的情况下，记录每次代理之前的客户端真实ip
63.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
64. 
65.         ssl on;
66. 
67.         ssl_certificate   ssl/4798969_xxxxxx.com.pem;
68.         ssl_certificate_key  ssl/4798969_xxxxxx.com.key;
69.         ssl_session_timeout 5m;
70.         ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
71.         ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
72.         ssl_prefer_server_ciphers on;
73.         charset utf-8;
74. 
75. 
76.         location / {
77.             root   html;
78.             index  index.html index.htm;
79.             add_header 'Access-Control-Allow-Origin' '*';
80.         }
81.         location /xboot {
82.             #反向代理
83.             proxy_pass  http://zwz;
84.         }
85. 
86.         error_page 404 /404.html;
87.     }
88. }

模拟钉钉！我将Vue项目打包成客户端，万物皆可打包！

一、基础打包过程

0.整理思路

1. 下载 nodewebkit

1.1：下载

1.2解压

2.新建一个 package.json 文件

3.新建一个index.html 文件

4. 打包zip压缩文件后，将后缀名改为nw

5.打包文件

6.发布客户端

二、Vue项目的打包

2.0 思路解析

2.1 Nginx是什么

2.2 Vue项目部署

2.3 上线验证

三、附录

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

模拟钉钉！我将Vue项目打包成客户端，万物皆可打包！

一、基础打包过程

0.整理思路

1. 下载 nodewebkit

1.1：下载

1.2解压

2.新建一个 package.json 文件

3.新建一个index.html 文件

4. 打包zip压缩文件后，将后缀名改为nw

5.打包文件

6.发布客户端

二、Vue项目的打包

2.0 思路解析

2.1 Nginx是什么

2.2 Vue项目部署

2.3 上线验证

三、附录

热门文章

最新文章

相关课程

相关电子书

相关实验场景