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

2023-07-18 150

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

管理几十个项目，每个项目的域名和端口记不住…
同一套系统在不同浏览器上展示不一样…
甲方经常问我项目的网址，其实我也忘记了…
客户习惯使用 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
  }
}