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

简介: 经常忘记网址?将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.jsonindex.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的前后端分离开发模板

博客:博客介绍

源代码:GitEEGitHubGitCode

2.1.2 基于 Vue 的大病保险管理系统

博客:博客介绍

源代码:GitEEGitHubGitCode


相关文章
|
1天前
|
JavaScript
|
3天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
12 4
|
2天前
|
JavaScript
vue知识点
vue知识点
7 2
|
3天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
3天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
13 1
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
108 0
重读vue电商网站45之项目优化上线
|
3天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
13 6
|
8天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1
|
3天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
8 0