经常忘记网址？将Vue项目一键打包为桌面客户端十分钟让你解决烦恼

Designer 小郑

发布于 2023-08-01 13:34:43

2.3K0

作者主页：Designer 小郑 作者简介：软件工程师一枚，来自浙江宁波，负责开发管理公司OA项目，专注软件前后端开发（Vue、SpringBoot和微信小程序）、系统定制、远程技术指导。CSDN学院、蓝桥云课认证讲师，全栈领域优质创作者，在校期间参加PAT乙级考试获得满分，三年ACM竞赛经验，斩获国奖两项，省奖五项。热爱技术、专注业务、开放合作、乐于分享，期待你我共同成长！ 主打方向：Vue、SpringBoot、微信小程序

不知各位朋友是否有以下的烦恼：

管理几十个项目，每个项目的域名和端口记不住…
同一套系统在不同浏览器上展示不一样…
甲方经常问我项目的网址，其实我也忘记了…
客户习惯使用 C/S 架构的系统，将软件 UI 固化为 WINDOWS 桌面端的应用程序，将一个 Vue 项目摆在他的面前，他看不惯！

解决这类问题的方案之一，就是将项目包装为桌面客户端，就像双击 Excel 那样，就可以进入项目。

那么我们如何去实现呢？

接下来就切入正题！

一、使用 NW.js 打包

NW.js基于Chromium和Node.js。它允许您直接从浏览器调用Node.js代码和模块，并在应用程序中使用Web技术。此外，您可以轻松地将web应用程序打包为本机应用程序。

官网：NW.js 官网

优点：免开发、门槛低、体积小

1.1 下载、解压 NW.js

1.1.1 下载 NW.js

进入 NW.js 官网，点击下载最新版，如下图所示。

下载的是一个普通压缩包，如下图所示。

1.1.2 解压 NW.js

接着我们将压缩包解压到指定目录，解压成功后如下图所示。

1.2 配置被打包的项目

1.2.1 新建 package.json

在 1.1 步的目录内新建 package.json 文件。

提示：可以新建一个空白 txt 文档，然后重命名哦！

并将 package.json 文件的内容编辑为：

{
	"main": "index.html",
	"name": "我的 CSDN 博客"
}

其中 main 字段为接下来新建的 html 文件名称，name 字段可以根据需要自定义，完整的配置会在下面提供。

1.2.2 新建 index.html

接着再新建一个 index.html 文件，如下图所示。

提示：可以新建一个空白 txt 文档，然后重命名哦！

并将 index.html 文件的内容编辑为：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
        window.location.href='https://blog.csdn.net/qq_41464123';
</script>
</body>
</html>

1.2.3 压缩

然后将 1.2.1 和 1.2.2 步做的 package.json 和 index.html 压缩，如下图所示。

提示：请注意压缩包内不要有文件夹哦！包内应该直接两个文件

1.2.4 更改后缀名

最后将压缩包后缀名，由 zip 改为 nw，如下图所示。

1.3 合成桌面客户端

1.3.1 合成客户端

前面两个步骤完成后，第三步就要合成桌面客户端了。

打开 cmd 窗口，进入当前目录，如下图所示。

提示：Win + R 键打开 “运行” 窗口，然后输入 “cmd” 按回车就可以打开黑框框了哦！

接着直接输入以下命令，开始合成。

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

运行结果如下图所示。

运行后，回到之前的目录，可以发现多了个 app.exe 文件，如下图所示。

双击即可打开，如下图所示。

1.3.2 更换图标

右键刚刚生成的 app.exe 文件，将快捷方式发送到桌面，操作过程如下图所示。

生成之后如下图所示。

接着右键快捷方式，点击属性，操作界面如下图所示。

点击浏览，选择 ico 图标后，点击确认，如下图所示。

提示：若您手上是 png 或 jpg 图片，需要转换为 ico 格式，网上有很多在线转换工具。

最后重命名快捷方式后，就大功告成啦！

最终效果如下图所示。

当然如果需要完整功能，比如窗口大小、是否全屏、顶部图标、是否固定任务栏等，可以参考如下的配置文件，并在 1.2.1 步骤配置。

{
	/**指定程序的起始页面。*/
	"main": "index.html",
	/**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
	"name": "Blog",
	/**程序描述*/
	"description": "我的 CSDN 博客",
	/**程序版本号*/
	"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": "我的技术博客",
		/**窗口的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
	}
}

二、发布 Vue 项目

聪明的同学已经发现，本篇博客的标题为 《经常忘记网址？将Vue项目一键打包为桌面客户端十分钟让你解决烦恼》。

第一章都在讲将一个网址打包为桌面客户端。

但我们手上的不是网址，是一个 localhost（本地版）的 Vue 项目！

第二章就主要讲解，如何将这个 Vue 项目转换为网址！

2.1 选择 Vue 项目

如果你的手上有 Vue 项目，可以忽略本小节；如果没有可以从下面的代码仓库中进行下载，同学们可以挑选自己喜欢的 Vue 项目进行打包。

2.1.6 更多…

更多题材的 Vue 系统可在文章底部评论区互动！

2.2 编译 Vue 项目

2.2.1 获取项目源代码

选定待打包的 Vue 项目后，先把项目源代码克隆到本地，克隆命令为 git clone 仓库地址，如下所示。

git clone git@gitee.com:yyzwz/template.git

代码下载完成后，打开项目文件夹，如下图所示。

2.2.2 安装依赖、编译项目

若你的电脑没有配置 node.js 和 Vue 脚手架，或者不知道如何安装 VsCode，可以移步 Vue 环境配置讲解。

使用 VsCode 打开项目的 front 文件夹。

运行 npm i 命令。

安装完成后，界面如下图所示。

接着使用 npm run build 命令，生成编译文件，编译成功后如下图所示。

可以发现在项目根目录多了个 dist 文件夹，如下图所示，这里面就是存放了 Vue 项目的待部署文件。

2.2.3 Nginx 配置

Nginx 和 Tomcat 一样，是一个轻量级的应用服务器，官网下载页面是：Nginx 下载。

同学们可以下载最新稳定版的 Nginx，如下图所示。

下载完成后解压到指定目录，如下图所示。

打开 conf 目录下的 nginx.conf 配置文件，编译为如下所示。

如果你没有域名，可以使用下面的配置

#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍
worker_processes  1;

events {
    #每一个worker进程能并发处理（发起）的最大连接数
    worker_connections  2048;
}

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:8081 weight=1;
    }

    server {
        listen       8080;
        server_name  localhost;
        # server_name  artskyhome.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;
        charset utf-8;

        location / {
            root   html;
            index  index.html index.htm;
            add_header 'Access-Control-Allow-Origin' '*';
        }
        location /zwz {
            proxy_pass  http://zwz;
        }

        error_page 404 /404.html;
    }
}

如果你有域名，并且有 SSL 证书，可以使用如下的配置，其中 1.pem 和 1.key 是 SSL 的证书文件。

#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍
worker_processes  1;

events {
    #每一个worker进程能并发处理（发起）的最大连接数
    worker_connections  2048;
}

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:8081 weight=1;
    }

    server {
        listen       8080 ssl;
        server_name  localhost;
        # server_name  artskyhome.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_certificate   ssl/1.pem;
        ssl_certificate_key  ssl/1.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 /zwz {
            proxy_pass  http://zwz;
        }

        error_page 404 /404.html;
    }
}

接着将 2.2.2 步骤生成的 dist 文件夹内容复制到 nginx 的 html 目录下，如下图所示。

2.2.4 Nginx 发布

将上一步完整的 nginx 文件夹复制到服务器的硬盘上，如下图所示。

运行 cmd，输入以下命令，如下图所示。

cd 项目目录
start nginx

接着就可以在云服务器上看到部署的 Vue 项目了哦！也就是将 Vue 项目转换为了网址。

如果你没有云服务器，也可以在电脑本地运行，执行以下cmd 命令。

cd C:\java\git\template\nginx
start nginx

接着打开 localhost:8080 就可以了，如下图所示。

也就是将 Vue 项目转换为了 localhost:8080 这个网址。

三、总结

本文讲解了如何将一个 Vue 项目打包为桌面客户端，实现像 Excel 一样双击运行，适用于管理较多项目且经常忘记网址的场景。本文还讲解了 Vue 项目从下载依赖、打包和 Nginx 部署的全过程，可以给 Vue 初学者参考学习。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除

打包

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度