不知各位朋友是否有以下的烦恼：
- 管理几十个项目，每个项目的域名和端口记不住…
- 同一套系统在不同浏览器上展示不一样…
- 甲方经常问我项目的网址，其实我也忘记了…
- 客户习惯使用 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.1 Vue和SpringBoot的前后端分离开发模板
博客：博客介绍
2.1.2 基于 Vue 的大病保险管理系统
博客：博客介绍
